之前我写有一篇文章：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前端代码的实现，后台保存修改代码，大体类似，都是修改数据库的过程，大家只要稍作修改就完全可以使用。
评论前必须登录！
注册