easyui datagrid rowediting使用心得
前不久使用了easyui的tree，现如今换了项目组，居然整个页面都是使用easyui的，而今我写的模块需要rowediting，有了easyui-tree的使用，我多少对easyui有了一定的了解，在使用rowediting的时候也算的上是熟路，但是奈何框架是封装的框架，有好多规则需要遵守，最后无奈的发现我不是轻车了，可谓之“重车熟路”。
言归正传，使用easyui，必须要把其需要的js、css都准备好了，这个就不多说了，需要的官网上下载。在官网上给的demo中已经有的基本使用的发放了。调用方式如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the row to start editing.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
url:'products.json',
required:true
}
}">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</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()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" οnclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" οnclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" οnclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" οnclick="getChanges()">GetChanges</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<script type="text/javascript">
$(function () {
var $dg = $("#dg");
$dg.datagrid({
url: "data.json",
width: 700,
height: 250,
columns: [
[
{
field: 'code',
title: 'Code',
width: 100,
editor: "validatebox"
},
{
field: 'name',
title: 'Name',
width: 200,
editor: "validatebox"
},
{
field: 'price',
title: 'Price',
width: 200,
align: 'right',
editor: "numberbox"
}
]
],
toolbar: [
{
text: "添加",
iconCls: "icon-add",
handler: function () {
$dg.datagrid('appendRow', {});
var rows = $dg.datagrid('getRows');
$dg.datagrid('beginEdit', rows.length - 1);
}
},
{
text: "编辑",
iconCls: "icon-edit",
handler: function () {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('beginEdit', rowIndex);
}
}
},
{
text: "删除",
iconCls: "icon-remove",
handler: function () {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('deleteRow', rowIndex);
}
}
},
{
text: "结束编辑",
iconCls: "icon-cancel",
handler: endEdit
},
{
text: "保存",
iconCls: "icon-save",
handler: function () {
endEdit();
if ($dg.datagrid('getChanges').length) {
//获得增加数据
var inserted = $dg.datagrid('getChanges', "inserted");
//获得删除数据
var deleted = $dg.datagrid('getChanges', "deleted");
//获得修改数据
var updated = $dg.datagrid('getChanges', "updated");
var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
alert("insert:" + JSON.stringify(inserted));
}
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
alert("delete:" + JSON.stringify(deleted));
}
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
alert("update:" + JSON.stringify(deleted));
}
$.post("servlet/commit", effectRow,function (rsp) {
if (rsp.status) {
$.messager.alert("提示", "提交成功！");
$dg.datagrid('acceptChanges');
}
}, "JSON").error(function () {
$.messager.alert("提示", "提交错误了！");
});
}
}
}
]
});
function endEdit() {
var rows = $dg.datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
$dg.datagrid('endEdit', i);
}
}
});
</script>
<table id="dg" title="批量操作"></table>
</body>
</html>
</body>
</html>
以上是html和js代码，下来我大体的说下后台获取方式：
以增加为例:
//设置请求编码
req.setCharacterEncoding("UTF-8");
//获取json字符串
String inserted = req.getParameter("inserted");
if(inserted != null){
//把json字符串转换成对象
List<Bean> listInserted = JSON.parseArray(inserted, Bean.class);
//TODO 你的操作。。。。。。
}
//bean,抽象前台数据为对象，
public class Bean {
private String code;
private String name;
private Double price;
.....set get 方法省略
}这个应该可以看懂吧，如果有不懂的地方可以留言。这个是一种很好很快捷的提交数据方式。但是我由于一些特殊原因没法使用，所以下面我发下我的提交数据方式：
function update() {
$('#dg').datagrid('beginEdit', editIndex);
}
function removeit() {
if (editIndex == undefined) {return}
var obj = $('#dg').datagrid('getRows')[editIndex];
var id = obj["id"];
if(id!=null&&id!=""){
$.messager.confirm("操作提示", "您确定要执行删除该属性吗？", function () {
$('#dg').datagrid('deleteRow', editIndex);
$('#classActionForm')
.form(
'submit',
{
url : 'deleteActionClass.cncc?id=' + id,
onSubmit : function() {
if ($(this).form("validate")) {
} else {
return false;
}
},
success : function(data) {
var temp = eval('(' + data + ')'); // change the JSON string to javascript object
if (temp.success) {
$.messager.alert('提示', "操作成功", 'info');
$("#dg")
.datagrid(
{
iconCls : 'icon-edit',
singleSelect : true,
toolbar : '#tb',
url : 'getActionList.cncc?type=${fiatclass.name }&randnum='+Math.floor(Math.random()*1000000),
loadMsg : '数据加载中请稍后……',
method : 'get',
onClickRow : onClickRow
});
//$("#dg").datagrid('reload');//重新加载
} else {
$.messager.alert("提示", "操作失败，失败原因："
+ temp.msg);
}
}
});
editIndex = undefined;
});
}else{
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
}
function accept() {
$('#dg').datagrid('acceptChanges');
var obj = $('#dg').datagrid('getRows')[editIndex];
var actionName = obj["actionName"];
var actionRemark = obj["actionRemark"];
var id = obj["id"];
var displayed = obj["displayed"];
/*if (displayed == "是") {
displayed = 1;
} else {
displayed = 0;
}*/
var used = obj["used"];
/*if (used == "是") {
used = 1;
} else {
used = 0;
}*/
$('#classActionForm')
.form(
'submit',
{
url : 'saveClassAction.cncc?id='
+ id
+ "&actionName="
+ actionName
+ "&actionRemark="
+ actionRemark
+ "&displayed="
+ displayed
+ "&used="
+ used
+ "&classid=${fiatclass.id }&classname=${fiatclass.name }",
onSubmit : function() {
if ($(this).form("validate")) {
} else {
return false;
}
},
success : function(data) {
var temp = eval('(' + data + ')'); // change the JSON string to javascript object
if (temp.success) {
$.messager.alert('提示', "操作成功", 'info');
$("#dg")
.datagrid(
{
iconCls : 'icon-edit',
singleSelect : true,
toolbar : '#tb',
url : 'getActionList.cncc?type=${fiatclass.name }&randnum='+Math.floor(Math.random()*1000000),
loadMsg : '数据加载中请稍后……',
method : 'get',
onClickRow : onClickRow
});
//$("#dg").datagrid('reload');//重新加载
} else {
$.messager.alert("提示", "操作失败，失败原因："
+ temp.msg);
$("#f-submit").linkbutton("enable");
$("#f-cancel").linkbutton("enable");
}
}
});
}
function reject() {
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}以上是我的提交数据的方式，我采用的方式单行数据提交，也就是每次新增或修改或删除都进行一次提交。至于后台获取数据的方式大家应该都知道，不过这里我多一句嘴：request.getParameter("name")来获取。
到了这里本来可以结束了，不过想到一个问题，在这个表单中，我们还是会遇到一个小问题，我在这里也说下。关于列表中的ID这一列数据，为了数据安全或者是没有展示的必要性，我们都不需要此列，但是修改的时候这个id值就是必不可少的一个东西，所以我们需要做到的是它即存在，又不可见，也就是隐藏起来，又啰嗦了，直接粘方法吧：
$(function(){
$("#dg").datagrid({
onLoadSuccess:function(){
$('#dg').datagrid("hideColumn","id");
//$('#dg').datagrid("showColumn","id");
}});
});