<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title></title>//引入easyui
<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>//引入编辑插件
<script type="text/javascript" src="../../jquery.edatagrid.js"></script> <body> <!-- 作者：offline 时间：2017-03-07 描述：添加、保存、取消、删除 --> <div style="margin-bottom:10px"> <a href="#" οnclick="javascript:$('#dg1').edatagrid('addRow')">AddRow</a> <a href="#" οnclick="javascript:$('#dg1').edatagrid('saveRow')">SaveRow</a> <a href="#" οnclick="javascript:$('#dg1').edatagrid('cancelRow')">CancelRow</a> <a href="#" οnclick="javascript:$('#dg1').edatagrid('destroyRow')">destroyRow</a> </div> -------javascript 创建数据网格（datagrid）。 <table id="dg1"></table> -------script------ <script> $('#dg1').edatagrid({ url:'datagrid_data1.json',//从远程站点请求数据的 URL。 method:'get',//请求远程数据的方法（method）类型默认为post(忘记不写get会报500错误) columns:[[//数据绑定 {field:'productid',title:'productid',width:100,editor:"text"},//editor编辑必须 {field:'productname',title:'productname',width:100,editor:"text"}, {field:'unitcost',title:'unitcost',width:100,align:'right',editor:"text"} ]], singleSelect:'true', pagination:true,//分页功能 默认为false pagePosition:'top',//定义分页栏的位置。可用的值有：'top'、'bottom'、'both'。该属性自版本 1.3 起可用。 rownumbers:true,//显示行号 toolbar: [//通过数组定义工具栏： { iconCls: 'icon-edit', handler: function(){alert('edit')} }, '-',//会生成间隔符号 { iconCls: 'icon-help', handler: function(){alert('help')} }, '-', { iconCls: 'icon-help', handler: function(){alert('help')} }, ], //checkOnSelect:false,// 如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。该属性自版本 1.3 起可用。 //selectOnCheck:false,//如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。该属性自版本 1.3 起可用。 /*queryParams: {//当请求远程数据时，发送的额外参数。 name: 'easyui', subject: 'datagrid' },*/ //multiSort:true, //定义是否启用多列排序。该属性自版本 1.3.4 起可用。 //remoteSort:true,//定义是否从服务器排序数据。 //sortName:"unitcost",//定义可以排序的列。 //sortOrder:'desc',//定义列的排序顺序，只能用 'asc' 或 'desc'。 //showHeader:true,//定义是否显示行的头部。 //showFooter:false,//定义是否显示行的底部。 //scrollbarSize:'18',//滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候）。 /*rowStyler: function(index,row){//返回例如 'background:red' 的样式。该函数需要两个参数：rowIndex：行的索引，从 0 开始。rowData：该行相应的记录。 if (row.unitcost>12){//unitcost字段大于12的行 样式修改 return 'background-color:#6293BB;color:#fff;'; // return inline style // the function can return predefined css class and inline style // return {class:'r1', style:{'color:#fff'}}; } },*/ //pageNumber:'2',//当设置了 pagination 属性时，初始化页码。(没用起) //pageSize:'10',//当设置了 pagination 属性时，初始化页面尺寸。 //pageList:[10,20,30,40,50],//当设置了 pagination 属性时，初始化页面尺寸的选择列表。 //singleSelect:true,//设置为 true，则只允许选中一行。默认为false //toolbar: '#tb',//调用头部工具栏这里指向id //fitColumns:true,//自动扩大或缩小 //事件 /*onClickRow:function(rowIndex,rowData)//当用户点击一行时触发rowIndex：被点击行的索引，从 0 开始,rowData：被点击行对应的记录 {alert(rowIndex+"--"+rowData)},*/ /*onDblClickRow:function(rowIndex,rowData)//当用户双击行时触发rowIndex：被点击行的索引，从 0 开始,rowData：被点击行对应的记录 {alert(rowIndex+"--"+rowData)},*/ /*onClickCell:function(rowIndex,rowIndex,value)//当用户单击一个单元格时触发。//onDblClickCell双击触发 { alert(rowIndex+"--"+rowIndex+"...."+value) },*/ /*frozenColumns:[[//与columns一样但是会自动靠在最左边 //{field : 'id',title : '编号',checkbox : true },//添加复选框 {field:'itemid',title:'itemid',width:100}, {field:'attr1',title:'attr1',width:100}, ]],*/ //resizeHandle:'right',//调整列的位置，可用的值有：'left'、'right'、'both'。当设置为 'right' 时，用户可通过拖拽列头部的右边缘来调整列。 //autoRowHeight:false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。默认为true //striped:true,//设置为 true，则把行条纹化笔者暂未实现 //nowrap:true,//据说设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。 //idField:'itemid',//指示哪个字段是标识字段。 //data:[{f1:'123',f2:'333'}],//要加载的数据。该属性自版本 1.3.2 起可用。(也许笔者版本问题，暂未成功) //loadMsg:'努力加载数据中...',//当从远程站点加载数据时，显示的提示消息。(笔者刷新时会看见) }); </script> ------------------------------------------------ </body></html>效果图
详细操作：