最近项目中用到了easyUI datagrid行编辑,根据官网的代码以及根据项目需要进行的改进。其中更为突出的问题,如何将前台获取的Object解析为json字符串传递给后台,然后再后台接收Object。今天介绍另外一种方式,直接将字符串传递给后台。
html 代码
<table id="dg" class="easyui-datagrid" title="轮次管理"
style="width: 100%; height: auto"
data-options="fitColumns:'true',rownumbers:true,pagination:'true',singleSelect: true,toolbar: '#tb',url:'courseRound',
method: 'get',onClickRow: onClickRow">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id', width:100 ,hidden:'hidden'">轮次id</th>
<th
data-options="field:'roundNo',width:100,align:'center',editor:{type:'numberbox',options:{precision:1}}">轮次编号</th>
<th
data-options="field:'beginTime',width:200,align:'center',
formatter:function(value,row){
return row.beginTime;
},
editor:{
type:'datetimebox',
options:{
valueField:'beginTime',
textField:'beginTime',
method:'get',
url:'products.json',
required:true
}
}">开始时间</th>
<th
data-options="field:'endTime',width:200,align:'center',
formatter:function(value,row){
return row.endTime;
},
editor:{
type:'datetimebox',
options:{
valueField:'endTime',
textField:'endTime',
method:'get',
url:'products.json',
required:true
}
}">结束时间</th>
<th
data-options="field:'lastestQuitTime',width:200,align:'center',
formatter:function(value,row){
return row.lastestQuitTime;
},
editor:{
type:'datetimebox',
options:{
valueField:'lastestQuitTime',
textField:'lastestQuitTime',
method:'get',
url:'products.json',
required:true
}
}">最晚退选时间</th>
<th
data-options="field:'isValid',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">是否启动</th>
</tr>
</thead>
</table>
<div id="tb" style="height: auto">
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true" οnclick="append()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-remove',plain:true" οnclick="removeit()">删除</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-save',plain:true" οnclick="accept()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-undo',plain:true" οnclick="reject ()">撤销</a>
</div>
js代码
/**
*
*/
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', {
index : editIndex,
field : 'beginTime'
});
var roundNo = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['roundNo'] = roundNo;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append() {
if (endEditing()) {
$('#dg').datagrid('appendRow' , { status : 'P' } );
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit',
editIndex);
}
}
function removeit() {
/*if (editIndex == undefined) {
return;
} else {*/
var row = $('#dg').datagrid('getSelected');
var roundid = row.id;
$.ajax({
type : "POST",
url : "deleRound",
data : {
"roundId" : roundid
},
success : function(result) {
if (result == "success") {
$.messager.alert("提示", "删除轮次成功", "info");
$('#dg').datagrid("reload");
} else {
if (result == "error") {
$.messager.alert("提示", "删除轮次失败", "info");
$('#dg').datagrid("reload");
}
}
}
});
/*}*/
}
function accept() {
if (endEditing()) {
// 利用easyui控件本身的getChange获取新添加,删除,和修改的内容
if ($("#dg").datagrid('getChanges').length) {
var inserted = $("#dg").datagrid('getChanges', "inserted");
var updated = $("#dg").datagrid('getChanges', "updated");
var url = "";
if (inserted.length > 0) {
var strid = inserted[0].id;
var strroundno = inserted[0].roundNo;
var strbeginTime = inserted[0].beginTime
var strendTime = inserted[0].endTime;
var strlastestQuitTime = inserted[0].lastestQuitTime;
url = "SaveRound";
} else {
var strid = updated[0].id;
var strroundno = updated[0].roundNo;
var strbeginTime = updated[0].beginTime
var strendTime = updated[0].endTime;
var strlastestQuitTime = updated[0].lastestQuitTime;
url="updateRound";
}
$.ajax({
type : "POST",
url : url,
data : {
"roundId" : strid,
"roundno" : strroundno,
"beginTime" : strbeginTime,
"endTime" : strendTime,
"lastestQuitTime" : strlastestQuitTime
},
success : function(result) {
if (result == "success") {
$.messager.alert('提醒', '保存成功!');
$('#t').datagrid('loadData', {
total : 0,
rows : []
});
$('#tt').datagrid('loadData', {
total : 0,
rows : []
});
$("#tt").datagrid('reload');
$("#t").datagrid('reload');
}
}
});
}
}
}
function reject() {
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges() {
var rows = $('#dg').datagrid('getChanges');
}
效果图
easyui官网提供了html以及公用的js,可以参考原版,然后根据需要进行修改。
另外参考了以一下博客,感谢博主提供解决思路。
http://blog.csdn.net/liuyanlinglanq/article/details/43988391