easyui datagrid rowediting使用心得

来源：互联网发布：iphone自制铃声mac 编辑：程序博客网时间：2024/05/22 06:02

前不久使用了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" onclick="append()">Append</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a></div></body></html>

至于工具栏的操作方式的js有很多种，其中我看着比较好的一种多行多种操作后同时提交的方法，这个是在网上查到的，具体地址找不到了，我就把代码贴下：

<!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");      }});});

其中hideColumn是隐藏方法，showColumn是将隐藏的展示出来，id是所隐藏的列。

0 0