2、easyUI-创建 CRUD可编辑dataGrid（表格）

在介绍这节之前，我们先看一下效果图：

双击可以进入编辑

点击添加可以在下一行显示

应用场景，一般不用于这种用户添加（此处只是示例），一般用于多记录，如学历信息，工作经历等

在这之前，我们要在index.php中引入jquery.edatagrid.js文件，可以去网站下载，稍后也会附出文件以代码的形式；

在前一节中，我们需要修改的有两个地方（优化后的代码基础上）,第一index.php页面，第二稍稍增加或者改动userAction和userModel文件；

首先附上index.php代码，然后解释以下：

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>dataGrid</title><link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/icon.css"><link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/color.css"><script src="../ui/jquery-easyui-1.4.5/jquery.min.js"></script><script src="../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script><script src="../js/crud/jquery.edatagrid.js"></script><script src="../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script><!--<script src="../js/crud/bus_pubuser.js"></script>--><script>$(function(){$('#dg').edatagrid({url: './data/crud/userAction.php?flag=list',saveUrl: './data/crud/userAction.php?flag=add',updateUrl: './data/crud/userAction.php?flag=modify',destroyUrl: './data/crud/userAction.php?flag=delete'});});</script>
</head>
<body><!--作者：ethancoco时间：2016-07-10描述：list--><table id="dg" title="用户列表" class="easyui-datagrid"  style="width:550px;height:250px"  toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="fname" width="50" editor="{type:'validatebox',options:{required:true}}">名</th><th field="lname" width="50" editor="{type:'validatebox',options:{required:true}}">姓</th><th field="sex" width="50" editor="{type:'validatebox',options:{required:true}}">性别</th><th field="phone" width="50" editor="{type:'validatebox',options:{required:true}}">联系电话</th><th field="email" width="50" editor="{type:'validatebox',options:{required:true}}">邮件</th></tr></thead></table><div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:$('#dg').edatagrid('addRow')">添加</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a><a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:$('#dg').edatagrid('saveRow')">保存</a><a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" οnclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a></div><!--作者：ethancoco时间：2016-07-10描述：dialog--><!--<div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px;" closed="true" modal="true" buttons="#dlg-buttons"><div class="ftitle">基本信息</div><hr /><form id="fm" method="post"><div class="fitem"><p><label>First Name:</label><input name="fname" class="easyui-validatebox" required="true"></p></div><div class="fitem"><p><label>Last Name:</label><input name="lname" class="easyui-validatebox" required="true"></p></div><div class="fitem"><p><label>Sex:</label><input name="sex" class="easyui-validatebox" required="true"></p></div><div class="fitem"><p><label>Phone:</label><input name="phone"></p></div><div class="fitem"><p><label>Email:</label><input name="email" class="easyui-validatebox" validType="email"></p></div></form></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">保存</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">关闭</a></div>-->
</body>
<html>

页面中table属性要更改，加入属性idField="id" 去除url属性，idField表示指明哪一个字段是标识字段。其中form表单可以去掉不需要弹出形式了；

/***********************/

在table的列中添加如下代码：editor="{type:'validatebox',options:{required:true}}"，

editor属性指明编辑类型。当字符串指明编辑类型的时候，对象包含2个属性：
type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options：对象，object, 该编辑器属性对应于编辑类型。

/***********************/

在head头部中可以看到，添加了如下代码：

指定url表示获取用户列表信息list

saveUrl表示新增用户保存动作（支持批量保存）

updateUrl表示更新保存用户动作

destroyUrl表示删除用户动作

在toolbar的按钮变成了οnclick="javascript:$('#dg').edatagrid('addRow')"等，这些addRow,destroyRow等你可以去js中看或者修改，不然就记住直接使用；

准备好之后，还是启用原来的后台代码，list,delete,update,都没用问题，但是add出现了错误，

跟踪代码知道，在add新增的时候，提交post表单的时候有一个新的属性isNewRecord等于true的也被提交过去了（ps,如果在之前的代码中，如果我使用每一个字段都去匹配的话，就不会出现这个问题，但是考虑到如果有很多的字段，你每个都去匹配的话，将会很耽误时间，所以就直接使用$_POST当做数组直接过去了），所以我们需要变更代码；

有两种解决方法，一是，我们直接重新加个flag,比如把saveUrl改成这样， saveUrl: './data/crud/userAction.php?flag=add_special',add_special作为一个新的flag传到后台，如后台userAction.php在switch下条件添加case "add_special" : $user->add_special($_POST); break; 然后在userModel.php新增add_special方法；

方法如下：

我这里直接每个赋值获取，由于字段比较少的原因（如果字段比较多，大家可以想想其他方法，$_POST提交过来的第一个是isNewRecord，思路是可以去除第一个）;

还有一种方法就是，把这个方法直接写在save_user方法下，如下：

function save_user($arr){$medoo = new medoo();//var_dump($arr);if(isset($arr['isNewRecord'])){//可编辑列表$fname = $arr["fname"]==null?"":$arr["fname"];$lname = $arr["lname"]==null?"":$arr["lname"];$sex = $arr["sex"]==null?"":$arr["sex"];$phone = $arr["phone"]==null?"":$arr["phone"];$email = $arr["email"]==null?"":$arr["email"];$sql = $sql = "insert into eui_user(fname,lname,sex,phone,email) values('$fname','$lname','$sex','$phone','$email')";$result = $medoo->query($sql);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}else{$result = $medoo->insert("eui_user",$arr);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}}

这节就完成了，这节代码。其中medoo.php附加了（看上一节）。

所需代码文件（index.php,medoo.php,jquery.edatagrid.js,userAction.php,userModel.php）bus_pubuser.js可以去掉；

index.php

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>dataGrid</title><link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/icon.css"><link rel="stylesheet" type="text/css" href="../ui/jquery-easyui-1.4.5/themes/color.css"><script src="../ui/jquery-easyui-1.4.5/jquery.min.js"></script><script src="../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script><script src="../js/crud/jquery.edatagrid.js"></script><script src="../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script><!--<script src="../js/crud/bus_pubuser.js"></script>--><script>$(function(){$('#dg').edatagrid({url: './data/crud/userAction.php?flag=list',saveUrl: './data/crud/userAction.php?flag=add',updateUrl: './data/crud/userAction.php?flag=modify',destroyUrl: './data/crud/userAction.php?flag=delete'});});</script>
</head>
<body><!--作者：ethancoco时间：2016-07-10描述：list--><table id="dg" title="用户列表" class="easyui-datagrid"  style="width:550px;height:250px"  toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="fname" width="50" editor="{type:'validatebox',options:{required:true}}">名</th><th field="lname" width="50" editor="{type:'validatebox',options:{required:true}}">姓</th><th field="sex" width="50" editor="{type:'validatebox',options:{required:true}}">性别</th><th field="phone" width="50" editor="{type:'validatebox',options:{required:true}}">联系电话</th><th field="email" width="50" editor="{type:'validatebox',options:{required:true}}">邮件</th></tr></thead></table><div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:$('#dg').edatagrid('addRow')">添加</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a><a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:$('#dg').edatagrid('saveRow')">保存</a><a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" οnclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a></div><!--作者：ethancoco时间：2016-07-10描述：dialog--><!--<div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px;" closed="true" modal="true" buttons="#dlg-buttons"><div class="ftitle">基本信息</div><hr /><form id="fm" method="post"><div class="fitem"><p><label>First Name:</label><input name="fname" class="easyui-validatebox" required="true"></p></div><div class="fitem"><p><label>Last Name:</label><input name="lname" class="easyui-validatebox" required="true"></p></div><div class="fitem"><p><label>Sex:</label><input name="sex" class="easyui-validatebox" required="true"></p></div><div class="fitem"><p><label>Phone:</label><input name="phone"></p></div><div class="fitem"><p><label>Email:</label><input name="email" class="easyui-validatebox" validType="email"></p></div></form></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">保存</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">关闭</a></div>-->
</body>
<html>

View Code

userAction.php

<?php require_once "../../model/crud/userModel.php";$flag = $_GET["flag"];if(isset($_GET["id"])){$id=$_GET["id"];}else if(isset($_POST["id"])){$id=$_POST["id"];}else{$id="";}$user = new userModel();switch($flag){case "list" : $user->list_user();break;case "add" : $user->save_user($_POST);break;case "modify" : $user->edit_user($_POST,$id);break;case "delete" : $user->delete_user($id);break;//特殊方法case "add_special" : $user->add_special($_POST);break;default: $user->showErrorMsg();}

View Code

userModel.php

<?php require_once "../../../common/medoo.php";header("Content-Type: text/html; charset=UTF-8");class userModel{function showErrorMsg(){echo json_encode(array('errorMsg'=>'没有相应的操作模块！'));}function list_user(){$medoo = new medoo();$result = $medoo->select("eui_user","*");echo json_encode($result,JSON_UNESCAPED_UNICODE);}function save_user($arr){$medoo = new medoo();//var_dump($arr);if(isset($arr['isNewRecord'])){//可编辑列表$fname = $arr["fname"]==null?"":$arr["fname"];$lname = $arr["lname"]==null?"":$arr["lname"];$sex = $arr["sex"]==null?"":$arr["sex"];$phone = $arr["phone"]==null?"":$arr["phone"];$email = $arr["email"]==null?"":$arr["email"];$sql = $sql = "insert into eui_user(fname,lname,sex,phone,email) values('$fname','$lname','$sex','$phone','$email')";$result = $medoo->query($sql);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}else{$result = $medoo->insert("eui_user",$arr);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}}function edit_user($arr,$id){$medoo = new medoo();$result = $medoo->update("eui_user",$arr," where id=".$id);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}function delete_user($id){$medoo = new medoo();$result = $medoo->delete("eui_user"," where id=".$id);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}//特殊方法function add_special($arr){$medoo = new medoo();$fname = $arr["fname"]==null?"":$arr["fname"];$lname = $arr["lname"]==null?"":$arr["lname"];$sex = $arr["sex"]==null?"":$arr["sex"];$phone = $arr["phone"]==null?"":$arr["phone"];$email = $arr["email"]==null?"":$arr["email"];$sql = $sql = "insert into eui_user(fname,lname,sex,phone,email) values('$fname','$lname','$sex','$phone','$email')";$result = $medoo->query($sql);if($result){echo json_encode(array('success'=>true));}else{echo json_encode(array('errorMsg'=>'操作过程出现错误！'));}}}

View Code

jquery.edatagrid.js

    /*** edatagrid - jQuery EasyUI** Licensed under the GPL:* http://www.gnu.org/licenses/gpl.txt** Copyright 2011-2015 www.jeasyui.com** Dependencies:* datagrid* messager**/(function($){// var oldLoadDataMethod = $.fn.datagrid.methods.loadData;// $.fn.datagrid.methods.loadData = function(jq, data){//     jq.each(function(){//         $.data(this, 'datagrid').filterSource = null;//     });//     return oldLoadDataMethod.call($.fn.datagrid.methods, jq, data);// };var autoGrids = [];function checkAutoGrid(){autoGrids = $.grep(autoGrids, function(t){return t.length && t.data('edatagrid');});}function saveAutoGrid(omit){checkAutoGrid();$.map(autoGrids, function(t){if (t[0] != $(omit)[0]){t.edatagrid('saveRow');}});checkAutoGrid();}function addAutoGrid(dg){checkAutoGrid();for(var i=0; i<autoGrids.length; i++){if ($(autoGrids[i])[0] == $(dg)[0]){return;}}autoGrids.push($(dg));}function delAutoGrid(dg){checkAutoGrid();autoGrids = $.grep(autoGrids, function(t){return $(t)[0] != $(dg)[0];});}$(function(){$(document).unbind('.edatagrid').bind('mousedown.edatagrid', function(e){var p = $(e.target).closest('div.datagrid-view,div.combo-panel,div.window,div.window-mask');if (p.length){if (p.hasClass('datagrid-view')){saveAutoGrid(p.children('table'));}return;}saveAutoGrid();});});function buildGrid(target){var opts = $.data(target, 'edatagrid').options;$(target).datagrid($.extend({}, opts, {onDblClickCell:function(index,field,value){if (opts.editing){$(this).edatagrid('editRow', index);focusEditor(target, field);}if (opts.onDblClickCell){opts.onDblClickCell.call(target, index, field, value);}},onClickCell:function(index,field,value){// if (opts.editing && opts.editIndex >= 0){//     $(this).edatagrid('editRow', index);//     focusEditor(target, field);// }if (opts.editIndex >= 0){var dg = $(this);if (opts.editing){dg.edatagrid('editRow', index);} else {setTimeout(function(){dg.edatagrid('selectRow', opts.editIndex);}, 0);}focusEditor(target, field);}if (opts.onClickCell){opts.onClickCell.call(target, index, field, value);}},onBeforeEdit: function(index, row){if (opts.onBeforeEdit){if (opts.onBeforeEdit.call(target, index, row) == false){return false;}}if (opts.autoSave){addAutoGrid(this);}opts.originalRow = $.extend(true, [], row);},onAfterEdit: function(index, row){delAutoGrid(this);opts.editIndex = -1;var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;if (url){var changed = false;var fields = $(this).edatagrid('getColumnFields',true).concat($(this).edatagrid('getColumnFields'));for(var i=0; i<fields.length; i++){var field = fields[i];var col = $(this).edatagrid('getColumnOption', field);if (col.editor && opts.originalRow[field] != row[field]){changed = true;break;}}if (changed){opts.poster.call(target, url, row, function(data){if (data.isError){var originalRow = opts.originalRow;$(target).edatagrid('cancelRow',index);$(target).edatagrid('selectRow',index);$(target).edatagrid('editRow',index);opts.originalRow = originalRow;opts.onError.call(target, index, data);return;}data.isNewRecord = null;$(target).datagrid('updateRow', {index: index,row: data});if (opts.tree){var idValue = row[opts.idField||'id'];var t = $(opts.tree);var node = t.tree('find', idValue);if (node){node.text = row[opts.treeTextField];t.tree('update', node);} else {var pnode = t.tree('find', row[opts.treeParentField]);t.tree('append', {parent: (pnode ? pnode.target : null),data: [{id:idValue,text:row[opts.treeTextField]}]});}}opts.onSuccess.call(target, index, row);opts.onSave.call(target, index, row);}, function(data){opts.onError.call(target, index, data);});} else {opts.onSave.call(target, index, row);}} else {opts.onSave.call(target, index, row);}if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row);},onCancelEdit: function(index, row){delAutoGrid(this);opts.editIndex = -1;if (row.isNewRecord) {$(this).datagrid('deleteRow', index);}if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row);},onBeforeLoad: function(param){if (opts.onBeforeLoad.call(target, param) == false){return false}$(this).edatagrid('cancelRow');if (opts.tree){var node = $(opts.tree).tree('getSelected');param[opts.treeParentField] = node ? node.id : undefined;}}}));if (opts.tree){$(opts.tree).tree({url: opts.treeUrl,onClick: function(node){$(target).datagrid('load');},onDrop: function(dest,source,point){var targetId = $(this).tree('getNode', dest).id;var data = {id:source.id,targetId:targetId,point:point};opts.poster.call(target, opts.treeDndUrl, data, function(result){$(target).datagrid('load');});}});}}function focusEditor(target, field){var opts = $(target).edatagrid('options');var t;var editor = $(target).datagrid('getEditor', {index:opts.editIndex,field:field});if (editor){t = editor.target;} else {var editors = $(target).datagrid('getEditors', opts.editIndex);if (editors.length){t = editors[0].target;}}if (t){if ($(t).hasClass('textbox-f')){$(t).textbox('textbox').focus();} else {$(t).focus();                    }}}$.fn.edatagrid = function(options, param){if (typeof options == 'string'){var method = $.fn.edatagrid.methods[options];if (method){return method(this, param);} else {return this.datagrid(options, param);}}options = options || {};return this.each(function(){var state = $.data(this, 'edatagrid');if (state){$.extend(state.options, options);} else {$.data(this, 'edatagrid', {options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)});}buildGrid(this);});};$.fn.edatagrid.parseOptions = function(target){return $.extend({}, $.fn.datagrid.parseOptions(target), {});};$.fn.edatagrid.methods = {options: function(jq){var opts = $.data(jq[0], 'edatagrid').options;return opts;},loadData: function(jq, data){return jq.each(function(){$(this).edatagrid('cancelRow');$(this).datagrid('loadData', data);});},enableEditing: function(jq){return jq.each(function(){var opts = $.data(this, 'edatagrid').options;opts.editing = true;});},disableEditing: function(jq){return jq.each(function(){var opts = $.data(this, 'edatagrid').options;opts.editing = false;});},isEditing: function(jq, index){var opts = $.data(jq[0], 'edatagrid').options;var tr = opts.finder.getTr(jq[0], index);return tr.length && tr.hasClass('datagrid-row-editing');},editRow: function(jq, index){return jq.each(function(){var dg = $(this);var opts = $.data(this, 'edatagrid').options;var editIndex = opts.editIndex;if (editIndex != index){if (dg.datagrid('validateRow', editIndex)){if (editIndex>=0){if (opts.onBeforeSave.call(this, editIndex) == false) {setTimeout(function(){dg.datagrid('selectRow', editIndex);},0);return;}}dg.datagrid('endEdit', editIndex);dg.datagrid('beginEdit', index);if (!dg.edatagrid('isEditing', index)){return;}opts.editIndex = index;focusEditor(this);var rows = dg.datagrid('getRows');opts.onEdit.call(this, index, rows[index]);} else {setTimeout(function(){dg.datagrid('selectRow', editIndex);}, 0);}}});},addRow: function(jq, index){return jq.each(function(){var dg = $(this);var opts = $.data(this, 'edatagrid').options;if (opts.editIndex >= 0){if (!dg.datagrid('validateRow', opts.editIndex)){dg.datagrid('selectRow', opts.editIndex);return;}if (opts.onBeforeSave.call(this, opts.editIndex) == false){setTimeout(function(){dg.datagrid('selectRow', opts.editIndex);},0);return;}dg.datagrid('endEdit', opts.editIndex);}var rows = dg.datagrid('getRows');function _add(index, row){if (index == undefined){dg.datagrid('appendRow', row);opts.editIndex = rows.length - 1;} else {dg.datagrid('insertRow', {index:index,row:row});opts.editIndex = index;}}if (typeof index == 'object'){_add(index.index, $.extend(index.row, {isNewRecord:true}))} else {_add(index, {isNewRecord:true});}//                if (index == undefined){//                    dg.datagrid('appendRow', {isNewRecord:true});//                    opts.editIndex = rows.length - 1;//                } else {//                    dg.datagrid('insertRow', {//                        index: index,//                        row: {isNewRecord:true}//                    });//                    opts.editIndex = index;//                }
                    dg.datagrid('beginEdit', opts.editIndex);dg.datagrid('selectRow', opts.editIndex);if (opts.tree){var node = $(opts.tree).tree('getSelected');rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0);}opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]);});},saveRow: function(jq){return jq.each(function(){var dg = $(this);var opts = $.data(this, 'edatagrid').options;if (opts.editIndex >= 0){if (opts.onBeforeSave.call(this, opts.editIndex) == false) {setTimeout(function(){dg.datagrid('selectRow', opts.editIndex);},0);return;}$(this).datagrid('endEdit', opts.editIndex);}});},cancelRow: function(jq){return jq.each(function(){var opts = $.data(this, 'edatagrid').options;if (opts.editIndex >= 0){$(this).datagrid('cancelEdit', opts.editIndex);}});},destroyRow: function(jq, index){return jq.each(function(){var dg = $(this);var opts = $.data(this, 'edatagrid').options;var rows = [];if (index == undefined){rows = dg.datagrid('getSelections');} else {var rowIndexes = $.isArray(index) ? index : [index];for(var i=0; i<rowIndexes.length; i++){var row = opts.finder.getRow(this, rowIndexes[i]);if (row){rows.push(row);}}}if (!rows.length){$.messager.show({title: opts.destroyMsg.norecord.title,msg: opts.destroyMsg.norecord.msg});return;}$.messager.confirm(opts.destroyMsg.confirm.title,opts.destroyMsg.confirm.msg,function(r){if (r){for(var i=0; i<rows.length; i++){_del(rows[i]);}dg.datagrid('clearSelections');}});function _del(row){var index = dg.datagrid('getRowIndex', row);if (index == -1){return}if (row.isNewRecord){dg.datagrid('cancelEdit', index);} else {if (opts.destroyUrl){var idValue = row[opts.idField||'id'];opts.poster.call(dg[0], opts.destroyUrl, {id:idValue}, function(data){var index = dg.datagrid('getRowIndex', idValue);if (data.isError){dg.datagrid('selectRow', index);opts.onError.call(dg[0], index, data);return;}if (opts.tree){dg.datagrid('reload');var t = $(opts.tree);var node = t.tree('find', idValue);if (node){t.tree('remove', node.target);}} else {dg.datagrid('cancelEdit', index);dg.datagrid('deleteRow', index);}opts.onDestroy.call(dg[0], index, row);var pager = dg.datagrid('getPager');if (pager.length && !dg.datagrid('getRows').length){dg.datagrid('options').pageNumber = pager.pagination('options').pageNumber;dg.datagrid('reload');}}, function(data){opts.onError.call(dg[0], index, data);});} else {dg.datagrid('cancelEdit', index);dg.datagrid('deleteRow', index);opts.onDestroy.call(dg[0], index, row);}}}});}};$.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {singleSelect: true,editing: true,editIndex: -1,destroyMsg:{norecord:{title:'Warning',msg:'No record is selected.'},confirm:{title:'Confirm',msg:'你确定要删除么?'}},poster: function(url, data, success, error){$.ajax({type: 'post',url: url,data: data,dataType: 'json',success: function(data){success(data);},error: function(jqXHR, textStatus, errorThrown){error({jqXHR: jqXHR,textStatus: textStatus,errorThrown: errorThrown});}});},autoSave: false,    // auto save the editing row when click out of datagridurl: null,    // return the datagrid datasaveUrl: null,    // return the added rowupdateUrl: null,    // return the updated rowdestroyUrl: null,    // return {success:true}
            tree: null,        // the tree selectortreeUrl: null,    // return tree datatreeDndUrl: null,    // to process the drag and drop operation, return {success:true}treeTextField: 'name',treeParentField: 'parentId',onAdd: function(index, row){},onEdit: function(index, row){},onBeforeSave: function(index){},onSave: function(index, row){},onSuccess: function(index, row){},onDestroy: function(index, row){},onError: function(index, row){}});////$.parser.plugins.push('edatagrid');})(jQuery);

View Code

转载于:https://www.cnblogs.com/jianyeLee/p/5657657.html

2、easyUI-创建 CRUD可编辑dataGrid（表格）相关推荐

easyui crud java_轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
数据收集并妥善管理数据是网络应用共同的必要.CRUD 允许我们生成页面列表,并编辑数据库记录.本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid. 我们将使 ...
使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素.在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格. 如果想看教程演示的话,请点击这里查看. 开始你要 ...
html中可编辑的表格控件,Editable DataGrid(可编辑表格)
### Editable DataGrid(可编辑数据表格) [Extension](http://www.jeasyui.com/extension/index.php) ? Editable Da ...
php怎么在线建excel,PHP中创建和编辑Excel表格的方法
PHP中创建和编辑Excel表格的方法来源:中文源码网浏览: 次日期:2019年11月5日 [下载文档: PHP中创建和编辑Excel表格的方法.txt ] (友情提示:右键点上行 ...
easyUI -datagrid表格数据不显示
出现easyUI -datagrid表格数据无法显示这种情况的可能原因有多方面的,可能是因情况而异吧,现在说一下日常做项目中我遇到过的这几个方面(原因二是我遇到过的,在网上看到也是常有的) 前提: 在 ...
可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击"确定"按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击& ...
vs用html制作表格,演练：在 Visual Web Developer 中编辑 HTML 表格
演练:在 Visual Web Developer 中编辑 HTML 表格 10/22/2014 本文内容更新:2007 年 11 月表格编辑是许多网页的重要组成部分,因为表格可用于创建页布局.本 ...
markdown中编辑复杂表格
markdown中编辑复杂表格使用markdown自带语法 markdown中自带了基本的表格编辑语法: 如: | name | age | gender | money | |-------|:- ...
JQuery实例：可以编辑的表格
HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

2、easyUI-创建 CRUD可编辑dataGrid（表格）

2、easyUI-创建 CRUD可编辑dataGrid（表格）相关推荐

最新文章

热门文章