<!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="#" onclick="javascript:$('#dg1').edatagrid('addRow')">AddRow</a>
<a href="#" onclick="javascript:$('#dg1').edatagrid('saveRow')">SaveRow</a>
<a href="#" onclick="javascript:$('#dg1').edatagrid('cancelRow')">CancelRow</a>
<a href="#" onclick="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>

效果图

详细操作：http://www.jeasyui.net/plugins/183.html

easyui的datagrid用js插入数据等编辑功能的实现的更多相关文章

  1. JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

  2. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

  3. easyui+struts2:datagrid无法不能得到数据

    转自:https://bbs.csdn.net/topics/390980437 easyui+struts2:datagrid无法访问到指定action: userlist.jsp部分代码: XML ...

  4. Easyui的datagrid结合hibernate实现数据分页

    最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...

  5. DataTables.js插入数据的两种方式

    一:采用数组的方式插入值 var tableData = []; ; ; $.each(data, function (i, d) { tableData.push([idxTable, d.stcd ...

  6. easyui，datagrid表格，行内可编辑

    最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...

  7. easyui 数据库修改部分（基于数据添加逻辑功能修改）

    {iconCls:'icon-edit',text:'修改', handler:function(){ type="edit"; //判断是否选中一条数据 var data = $ ...

  8. 分享一个表格插入和删除编辑功能用jQuery实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

随机推荐

  1. HTML5 SVG实现过山车动画

    HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...

  2. BZOJ 1638 [Usaco2007 Mar]Cow Traffic 奶牛交通：记忆化搜索【图中边的经过次数】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1638 题意: 给你一个有向图,n个点,m条有向边. 对于所有从入度为0的点到n的路径,找出 ...

  3. BZOJ 1193 [HNOI2006]马步距离：大范围贪心 小范围暴搜

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1193 题意: 给定起点(px,py).终点(sx,sy).(x,y < 100000 ...

  4. Data Guard 异构平台支持手册

    背景 最简单的DG 环境是同数据库版本,同操作系统平台. 但有时需要在异构平台上来部署DG 环境,比如异构下使用DG 来进行数据迁移,从而降低停机时间和风险等等. 1. 查看主备库的Platform ...

  5. BZOJ1503：[NOI2004]郁闷的出纳员

    浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...

  6. maven学习八 关于maven的version

      在一个有继承关系的POM文件中,父项目中有如下定义: <dependencyManagement> <dependency> <groupId>com.type ...

  7. CSharp读取配置文件的类(简单实现)

    Reinventing the wheel 系列 CSharp 读取配置文件的类 简单实现(注意没有写) 本人对CS 不是很熟,库也不熟,所以到网上找个实现,并自己添加了点异常.如果只是读取信息,足够 ...

  8. ng2中的ng-content用法

    用途:1.ng-content用于在组件中嵌入内容 2.ng-content可以在组件中嵌入模板代码,方便定制可复用的组件 select属性支持css选择器,如"#id",&quo ...

  9. xml约束(转)

    在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 常用的约束技术XML DTD :XML Schema. XML Schema 也是一种用于定义和描述 XML 文档 ...

  10. “找女神要QQ号码”——跟风篇java新手版(求指点)

    吃完粽子后闲来无事,于是准备在园子里面看看.突然看到了一个“找女神要QQ号码”的文章,顿时精力充沛了~~^_^. 该文章楼主说明此算法来自于<啊哈!算法>,图文并茂,非常不错.<啊哈 ...