之前我写有一篇文章:jQuery EasyUI datagrid的行内增删改查代码,主要讲了EasyUI的datagrid直接在行内进行修改数据的实现方法。这种行内增删改的方法,比较适合表格列数较少,修改列数不多的情况,当我们有一张表很多列,并且修改的时候,每一列都有可能变动,那么在行内修改的话就有些不太方便了,这时候,我们用弹出一个form表单进行修改再保存就比较合适了。这篇文章就来说说EasyUI的datagrid弹出form增删改的实现。
效果
实现代码
html代码
<div data-options="region:'south',split:true" style="height: 270px;"> <table id="ttRoutes"></table> <form id="fmRoutes" method="POST" style="margin: 0;padding:10px 0 0 40px;"> <input type="text" value="0" name="ID"/> <input type="text" value="0" name="FeeID"/> <p><label> 费用类型:</label>@*<input type="text" name="FeeType" class="textbox"/>*@ <select class="easyui-combobox" name="FeeType" style="width:150px; " data-options="panelHeight:120"> <option value="交通费">交通费</option> <option value="住宿费">住宿费</option> <option value="招待费">招待费</option> <option value="邮寄费">邮寄费</option> <option value="标书费">标书费</option> <option value="其他">其他</option> </select> </p> <p><label> 产生费用:</label><input type="text" name="Fee" class="textbox"/></p> <p><label> 起始地点:</label><input type="text" name="StartPlace" class="textbox"/></p> <p><label>发生地/终点:</label><input type="text" name="EndPlace" class="textbox"/></p> <p><label> 发票张数:</label><input type="text" name="FeeNum" class="textbox" value="0"/></p> </form> </div> <style type="text/css"> #fmRoutes input { width: 150px; } </style>
js代码
ttRoutes.datagrid({ fit: true, fitColumns: true, rownumbers: true, columns: [ [ { field: 'ID', title: 'ID', width: 100, //hidden:true, }, { field: 'FeeType', title: '类型', width: 100, }, { field: 'Fee', title: '费用', width: 100, }, { field: 'StartPlace', title: '起点', width: 100, }, { field: 'EndPlace', title: '终点/发生地', width: 100, }, { field: 'FeeNum', title: '发票张数', width: 100, }, { field: 'InsertTime', title: '录入时间', width: 100, hidden: true, } ] ], toolbar: [ { text: '新增', iconCls: 'icon-add', handler: function() { if ($('#fmRoutes input[name=FeeID]').val() == 0) { $.messager.show({ title: '提示', msg: '请先选择 一行 主表数据!', }); return; } //新增时 主键ID为0。避免之前修改过别的明细,主键ID不为0的异常 $('#fmRoutes input[name=ID]').val('0'); openfmRoutes(); } }, { text: '修改', iconCls: 'icon-edit', handler:function() { var row = ttRoutes.datagrid('getSelections'); if (row.length > 1) { $.messager.alert('警告', '修改 只能选中一条数据!'); } else if (row.length == 1) { fmRoutes.form('load', row[0]); openfmRoutes(); } } }, { text: '删除', iconCls: 'icon-remove', handler:function() { var row = ttRoutes.datagrid('getSelections'); if (row.length == 0) { $.messager.show({ title: '提示', msg: '请先选择数据', }); } else { var feeID = row[0].FeeID; $.messager.confirm('确定', '确定要删除选中的记录吗?', function(flag) { if (flag) { var ids = []; for (var i = 0; i < row.length; i++) { ids.push(row[i].ID); } $.messager.progress({ text: '正在删除中!' }); $.post('/BaoXiao/DeleteRoutes', { ids: ids.join(',') }) .then(function(data) { $.messager.progress('close'); if (data > 0) { $.messager.show({ title: '提示', msg: '删除成功!', }); loadRoutes(feeID); } else { $.messager.show({ title: '提示', msg: '删除失败!', }); } }); } }); } } }, ] }); $('#fmRoutes input[name=Fee]').validatebox({ validType: 'SHUZI', invalidMessage:'只能输入数字(小数亦可)!', }); $('#fmRoutes input[name=FeeNum]').numberspinner({ min: 0, max: 50, editable: false, }); //打开 fmRoutes 表单 function openfmRoutes() { fmRoutes.dialog({ width: 350, title: '路线', iconCls: 'icon-add', modal: true, closed: true, buttons: [ { text: '保存', iconCls: 'icon-save', handler: function () { //保存 代码 saveRoutes(); } }, { text: '取消', iconCls: 'icon-redo', handler: function () { fmRoutes.dialog('close'); //.form('reset'); } } ] }).dialog('open'); } //保存路线 function saveRoutes() { if (fmRoutes.form('validate')) { $.messager.progress({ text: '正在保存!' }); $.post('/BaoXiao/SaveRoutes', { routes: JSON.stringify(serializeObject(fmRoutes)) }) .then(function (data) { $.messager.progress('close'); if (data > 0) { $.messager.show({ title: '提示', msg: '保存成功!', }); loadRoutes($('#fmRoutes input[name=FeeID]').val()); fmRoutes.dialog('close').form('reset'); } else { $.messager.show({ title: '提示', msg: '保存失败!', }); } }); } } //加载 Routes 路线数据 function loadRoutes(ID) { $.post('/BaoXiao/GetRoutes', { FeeID: ID }, function (data) { //console.log(data); ttRoutes.datagrid('loadData', data).datagrid('loaded'); }); }
总结
这绝对是一篇极具干货的文章,代码都是先用的程序中摘出来的,主要是EasyUI前端代码的实现,后台保存修改代码,大体类似,都是修改数据库的过程,大家只要稍作修改就完全可以使用。
评论前必须登录!
注册