1.目的
如图所示，实现行编辑栏中的编辑删除，以及在时间建议中显示上中下旬
可参考easyui官方文档中所写的关于datagrid列属性：http://www.jeasyui.net/plugins/183.html
可知formatter有三个参数：
value：字段的值。
rowData：行的记录数据。
rowIndex：行的索引。
实现代码如下：
html代码：
<div
data-options="region:'south',iconCls:'icon-reload',title:'',split:true,border:false,bodyCls:'border_top',height:'55%'">
<div data-toggle="topjui-tabs"
data-options="id:'slaveTabs',
fit:true,
border:false,
parentGrid:{
type:'datagrid',
id:'mainDg',
param:'c0:uuid'
}">
<div title="需求表详细" data-options="id:'tab0',iconCls:'fa fa-th'">
<table data-toggle="topjui-datagrid"
data-options="id:'detailDg',
singleSelect:false,
selectOnCheck:true,
checkOnSelect:true,
initCreate: false,
reloadAfterSave:true,
idField:'uuid',
url:'WorkingRequirementDetails/indexHandle.jsp?flags=queryByC0'
">
<thead>
<tr>
<th data-options="field:'uuid',title:'标识',checkbox:true">th>
<th data-options="field:'c1',title:'所属集团军',width:150">th>
<th data-options="field:'c2',title:'装备专业',width:100">th>
<th data-options="field:'c3',title:'武器系统名称',width:100">th>
<th data-options="field:'c4',title:'数量',sortable:true">th>
<th data-options="field:'c5',title:'单位',sortable:true">th>
<th data-options="field:'c6',title:'装备所属部队',sortable:true,width:150">th>
<th data-options="field:'c7',title:'部队驻地',sortable:true">th>
<th data-options="field:'c8',title:'时间建议',sortable:true,formatter:timeFormatter">th>
<th data-options="field:'c9',title:'工作方式',sortable:true">th>
<th data-options="field: 'handle', title: '操作', sortable: false, width:100,align:'center',formatter:operateFormatterDetail">th>
tr>
thead>
table>
div>
div>
js代码
/** * 从表单元格内容进行格式化操作 */ function operateFormatterDetail(value, row, index) { var htmlstr = ''; htmlstr += ''; return htmlstr; } /** * 从表时间建议进行格式化操作 */ function timeFormatter(value, row, index) { var rst = row.c8; var str2 = rst.substring(0,4)+"年"; var str3 = rst.substring(5,7)+"月"; //获取2019-03-22中的22 var time = rst.substring(8,rst.length); console.log(time); if(parseInt(time)<10){ time = str2+str3+"上旬"; }else if(parseInt(time)>20){ time = str2+str3+"下旬"; }else{ time = str2+str3+"中旬"; } return time; }
/** * 以主键对子表进行数据修改操作 */ function openDetailEditDiag(uuid) { //创建form表单 var $editDialog = $(''); // $('#editDialog')用这个查找不能二次打开 $editDialog.iDialog({ title : '修改需求表数据', width : 600, height : 400, closed : false, cache : false, collapsible : 0, resizable : 0, //定义是否可以调整对话框的大小 iconCls : 'fa fa-pencil', maximizable : 0, href : 'WorkingRequirementDetails/indexDatail.html', modal : true, //设置为模式窗口，窗口外的其他元素不能够点击 buttons : [ { text : '保存', iconCls : 'fa fa-save', btnCls : 'topjui-btn-blue', handler : function() { //保存按键AJAX处理 var formData = $editDialog.serializeArray(); //进行序列化操作，返回json数组 jQuery.ajax({ type : 'POST', //请求方式 url : "WorkingRequirementDetails/indexHandle.jsp?flags=update", dataType : "json", //预期服务器返回的数据类型 contentType : "application/x-www-form-urlencoded;charset=UTF-8", //返回给服务器时候的字符编码 data : formData, //发送到服务器上的数据 success : function(data) { showMessage(data); if (data.statusCode == 200) { //修改成功的状态码为200 $editDialog.iDialog('close'); //关闭对话框 $('#detailDg').iDatagrid('reload'); //数据表格重新加载一遍 } }, error : function(data) {} }); } }, { text : '关闭', iconCls : 'fa fa-close', btnCls : 'topjui-btn-red', handler : function() { $editDialog.iDialog('close'); } } ], onLoad : function() { //在dialog给文本框打开的时候给文本框赋值 //加载表单数据 $.getJSON('WorkingRequirementDetails/indexHandle.jsp?flags=detail&uuid=' + uuid, function(data) { $editDialog.form('load', data); }); } }); } /** * 以主键方式对子表数据进行删除操作 */ function deleteDetailRow(uuid) { $.iMessager.confirm('操作提示', '所选择的数据一经删除将不可恢复，是否确认进行此操作？', function(r) { if (r) { //异步提交删除数据 $.ajax({ type : 'POST', url : "WorkingRequirementDetails/indexHandle.jsp?flags=delete", dataType : "json", contentType : "application/x-www-form-urlencoded;charset=UTF-8", data : { "uuid" : uuid }, //构建主键 success : function(data) { showMessage(data); if (data.statusCode == 200) { //操作成功重载数据 $('#detailDg').iDatagrid('reload'); } }, error : function(data) { //错误处理 } }); } }); }