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"/>
保证数据可以正常保存到后台,做好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); } }