easyUI动态添加行数据展示和存储问题分析

easyUI动态添加行数据展示和存储问题分析


<#include "/common/head.html"/>

<div id="tspaceHeadTable" class="easyui-layout add_content" data-options="fit:true, border:false">
    <div data-options="region:'north', border:false" style="height: 72px;">
        <form id="ff" method="post" style="background: #449d44;border: #3d5266">
            <table cellpadding="5" width="100%">
                <tr>
                    <th>表单名称:</th>
                    <td><input class="easyui-textbox" type="text" name="form_name" value="${model.form_name}" data-options="required:true" style="width: 120px;"></input></td>
                    <th>数据表名称:</th>
                    <td><input class="easyui-textbox" type="text" name="table_name" value="${model.table_name}" data-options="required:true" style="width: 120px;"></input></td>
                    <th>主键:</th>
                    <td><input class="easyui-textbox" type="text" name="id_field" value="${model.id_field}" data-options="required:true" style="width: 120px;"></input></td>
                </tr>
                <tr>
                    <th>弹窗大小:</th>
                    <td>
                        <input name="dialog_size" value="${model.dialog_size}" class="easyui-combobox" data-options="
                      valueField: 'id',
                    textField: 'text',
                      data:[
                         {id:'400x300', text:'400x300'},
                         {id:'600x400', text:'600x400'},
                         {id:'700x500', text:'700x500'},
                         {id:'800x600', text:'800x600'}
                         ]
                      " style="width: 120px;"/>
                    </td>
                    <th></th>
                    <td></td>
                    <th></th>
                    <td></td>
                </tr>
            </table>
        </form>
    </div>
    <div data-options="region:'center', border:false" style="border-top-width: 1px;">
        <table id="dg" class="easyui-datagrid"
               data-options="
                       fit:true,
                       rownumbers:true,
                        border: false,
                        toolbar: '#tb',
                        url: 'listField?head_id=${model.id}',
                        method: 'get',
                        onClickCell: onClickCell,
                        onLoadSuccess: function(data) {
                           if(data.total < 20) {
                              setTimeout(function(){
                                   for(var i = 0; i < data.rows.length; i++) {
                                       $('#dg').datagrid('beginEdit', i);
                                   }
                               }, 200);
                           }else {
                              showMsg('字段数量超出了我的想象,默认不打开编辑模式!');
                           }
                        }
                    ">
            <thead>
            <tr>
                <th data-options="field:'id', checkbox:true"></th>
                <th data-options="field:'field_name',width:100,editor:'textbox'">字段名称</th>
                <th data-options="field:'column_name',width:120,editor:'textbox'">列表列名</th>
                <th data-options="field:'input_type',width:90,
                              editor:{
                                    type:'combobox',
                                    options:{
                                        valueField:'value',
                                        textField:'text',
                                        data: [{value:'easyui-textbox', text:'textbox'}
                                              , {value:'easyui-combobox', text:'combobox'}
                                              ,{value:'easyui-datebox', text:'datebox'}
                                              ,{value:'easyui-datetimebox', text:'datetimebox'}
                                              ,{value:'textarea', text:'textarea'}
                                              ,{value:'easyui-numberspinner', text:'numberspinner'}
                                              ,{value:'easyui-filebox_img', text:'file(图片)'}
                                             ],
                                        required:true
                                    }
                                }">控件类型</th>
                <th data-options="field:'is_show_list',width:60,hidden:true,editor:{type:'checkbox'}">列表显示</th>
                <th data-options="field:'is_allow_detail',width:60,hidden:true,editor:{type:'checkbox'}">详情显示</th>
                <th data-options="field:'is_allow_update',width:60,hidden:true,editor:{type:'checkbox'}">允许编辑</th>
                <th data-options="field:'is_allow_add',width:60,hidden:true,editor:{type:'checkbox'}">允许增加</th>
                <th data-options="field:'is_search',width:60,hidden:true,editor:{type:'checkbox'}">是否搜索</th>
                <th data-options="field:'search_type',width:60,hidden:true,
                                editor:{
                                    type:'combobox',
                                    options:{
                                        valueField:'value',
                                        textField:'text',
                                        data: [{value:1, text:'值'}, {value:'2', text:'范围'}],
                                        required:false
                                    }
                                }">搜索类型</th>
                <th data-options="field:'is_sum',width:60,hidden:true,editor:{type:'checkbox'}">是否汇总</th>
                <th data-options="field:'is_allow_null',width:60,editor:{type:'checkbox',options:{align:'center'}}">允许为空</th>
                <th data-options="field:'column_length',width:40,editor:'textbox'">列宽</th>
                <th data-options="field:'dict_sql',width:100,editor:'textbox'">字典sql</th>
                <th data-options="field:'default_value',width:60,editor:'textbox'"><span class="symbol_var" title="支持变量">$</span>默认值</th>
                <th data-options="field:'order_num',width:50,align:'center',editor:'textbox'">顺序</th>
            </tr>
            </thead>
        </table>
        <div id="tb" style="height:auto">
            <a href="###" onclick="showHeadField(1)" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true" style="padding: 0px 4px;">数据</a>
            <a href="###" onclick="showHeadField(2)" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="padding: 0px 4px;">页面</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">增加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
        </div>
        <script type="text/javascript">
            var editIndex = undefined;
            function endEditing(){
                if (editIndex == undefined){return true}
                if ($('#dg').datagrid('validateRow', editIndex)){
                    $('#dg').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }

            //修改的方式是直接点击单元格,所以table要加上onClickCell属性,然后重写onClickCell方法
            function onClickCell(index, field){
                $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);return;
                if (editIndex != index){
                    if (endEditing()){
                        $('#dg').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                        var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                        if (ed){
                            ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                        }
                        editIndex = index;
                    } else {
                        $('#dg').datagrid('selectRow', editIndex);
                    }
                }
            }

           //添加的方法 添加一行并设置为可编辑状态beginEdit,第二个参数根据行的顺序写入
            function append(){
                if (endEditing()){
                   // $('#dg').datagrid('appendRow',{is_show_list:1});
                    $('#dg').datagrid('appendRow',{
                    field_name:"",
                    is_allow_null:"",
                    column_length:"",
                    dict_sql:"",
                    order_num:"",
                    default_value:"",

                    is_show_list:0,
                    is_allow_detail:0,
                    is_allow_update:0,
                    is_allow_add:0,
                    is_search:0,
                    search_type:0,
                    is_sum:0
                    });
                    editIndex = $('#dg').datagrid('getRows').length-1;
                    $('#dg').datagrid('selectRow', editIndex)
                        .datagrid('beginEdit', editIndex);
                }
            }
            // 删除
            function removeit(){
                $.each($("#dg").datagrid("getSelections"), function(i, item) {
                    $('#dg').datagrid('deleteRow', $("#dg").datagrid("getRowIndex", item));
                });
                editIndex = undefined;
            }

            //保存方法(添加修改用了一个方法accept())
            function accept(){
                //动态添加的行保存前必须要一定要结束编辑,循环结束所有行(关键)
                editIndex= $('#dg').datagrid('getRows').length;
                for(var i=0;i<editIndex;i++){
                    $('#dg').datagrid("endEdit",i);
                }
                if (endEditing()){
                    $('#dg').datagrid('acceptChanges');
                }
            }
            function reject(){
                $('#dg').datagrid('rejectChanges');
                editIndex = undefined;
            }
            function getChanges(){
                var rows = $('#dg').datagrid('getChanges');
                alert(rows.length+' rows are changed!');
            }
        </script>
    </div>
</div>
<script>
    top.window.subPage.save = save;
  //点击保存后触发的方法
    function save(successFunc) {

        //对上面的form表单进行校验
        if($("#tspaceHeadTable").form('validate')) {
        }
        //调用accept方法结束编辑并保存数据
             accept();
        //调用getParam方法获取最上面表单的信息
            var param = getParam();
        //获取所有行的信息转为json封装到param.rowsStr中,后台取值
            param.rowsStr = JSON.stringify($("#dg").datagrid("getRows"));
            console.log("获取信息"+JSON.stringify($("#dg").datagrid("getRows")));
        //调用update后台方法
            $.post("update", param, function(data) {
                if(successFunc) {
                    successFunc();
                }
                top.window.closeWindow();
                top.window.subPage.loadCurrDatagrid();
            });
    }
    function getParam() {
        return {
            "model.id": ${model.id},
            "model.form_name": $(":input[name='form_name']").val(),
            "model.table_name": $(":input[name='table_name']").val(),
            "model.id_field": $(":input[name='id_field']").val(),
            "model.is_auto": $(":checked[name='is_auto']").val(),
            "model.dialog_size": $(":input[name='dialog_size']").val()
        }
    }
    function submitForm(){
        $('#ff').form('submit');
    }
    function clearForm(){
        $('#ff').form('clear');
    }

    var headFieldList = [
        {field:"field_name", type: 1},
        {field:"is_allow_null", type: 1},
        {field:"column_length", type: 1},
        {field:"dict_sql", type: 1},
        {field:"order_num", type: 1},
        {field:"default_value", type: 1},

        {field:"is_show_list", type: 2},
        {field:"is_allow_detail", type: 2},
        {field:"is_allow_update", type: 2},
        {field:"is_allow_add", type: 2},
        {field:"is_search", type: 2},
        {field:"search_type", type: 2},
        {field:"is_sum", type: 2}
    ];
    function showHeadField(type) {
        type = type || 1;
        var dg = $("#dg");
        $.each(headFieldList, function(i, item) {
            if(item.type == type) {
                dg.datagrid("showColumn", item.field);
            }else {
                dg.datagrid("hideColumn", item.field);
            }
        });
    }
</script>
<#include "/common/foot.html"/>

easyUI动态添加行数据展示和存储问题分析

保证数据可以正常保存到后台,做好appendRows时按照顺序列出动态增加行的数据。

//添加的方法 添加一行并设置为可编辑状态beginEdit,
第二个参数根据行的字段的顺序写入
 function append(){
     if (endEditing()){
        // $('#dg').datagrid('appendRow',{is_show_list:1});
         $('#dg').datagrid('appendRow',{
         field_name:"",//字段名称
         is_allow_null:"",//允许为空
         column_length:"",//列宽
         dict_sql:"",//字典sql
         order_num:"",//顺序
         default_value:"",//默认值

         is_show_list:0,//列表显示
         is_allow_detail:0,//详情显示
         is_allow_update:0,//允许编辑
         is_allow_add:0,//允许增加
         is_search:0,//是否搜索
         search_type:0,//搜索类型
         is_sum:0,//是否汇总

         column_name:""//列表列名
         });
         editIndex = $('#dg').datagrid('getRows').length-1;
         $('#dg').datagrid('selectRow', editIndex)
             .datagrid('beginEdit', editIndex);
     }
 }