这是随便写的一个例子,其中主要为大家演示了一些常用操作:
页面效果如下:
代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <!-- 引入css --> <link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/redmond/jquery-ui-1.8.2.custom.css"> <link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/ui.jqgrid.css"> <link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/ui.multiselect.css"> <!-- 引入js 顺序:jquery、jquery-ui、grid.locale-cn、jqGrid --> <script type="text/javascript" src="../js/jqGrid/js/jquery.min.js"></script> <script type="text/javascript" src="../js/jqGrid/js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript" src="../js/jqGrid/js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="../js/jqGrid/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="../js/jqGrid/js/grid.common.js"></script> <script> $(function(){ $("#list4").jqGrid({ url:'', datatype: "local", height: 250, colNames:['Check','InvNo','Date', 'Client', 'Amount','Tax','Total','Notes','Modify','Delete'], colModel:[ {name:'title',index:'title',width:60, align:"center", formatter:function(cellvalue, options, rowObject){ return "<input type='radio' name='myId' value='"+cellvalue+"' onclick=\"radioSelect('myId', 'listTable')\" />"; } }, {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100, cellattr:function(rowId, val, rawObject, cm, rdata) { return "style='color:red;font-weight:bold;text-decoration:underline'"; } }, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false}, {name:'operMod',index:'operMod',align:"center",width:"80", formatter: function (value, grid, rows, state) { return "<a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + value + ")\">Edit</a>" } }, {name:'operDel',index:'operDel', width:80,align:"center"} ], rownumbers:true, rownumWidth:40, caption: "Manipulating Array Data", gridComplete: function () { var ids = jQuery("#list4").jqGrid("getDataIDs"); for (var i = 0; i < ids.length; i++) { var id = ids[i]; modify = "<a href=\"#\" style=\"color:#f60\" onclick=\"Delete(" + id + ")\">Delete</a>"; jQuery("#list4").jqGrid("setRowData", id, { operDel: modify }); } } }); var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++) $("#list4").jqGrid('addRowData',i+1,mydata[i]); }); </script> </head> <body> <table id="list4"></table> <div id="pager"></div> </body> </html>
在这个例子中,有一下几个知识点:
1)设置No自增列:
colNames和colModel中不需要做任何设置,只需要添加 rownumbers:true,另外rownumWidth:40是设置这一列的宽度值。
rownumbers:true, rownumWidth:40,
2)添加一个radioButton列:
在formatter中添加function,返回一个html字符串
{name:'title',index:'title',width:60, align:"center", formatter:function(cellvalue, options, rowObject){ return "<input type='radio' name='myId' value='"+cellvalue+"' onclick=\"radioSelect('myId', 'listTable')\" />"; } },
3)给行内添加按钮:
方法一:在colModel中的列属性中添加:
{name:'operMod',index:'operMod',align:"center",width:"80", formatter: function (value, grid, rows, state) { return "<a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + value + ")\">Edit</a>" } }
方法二:在gridComplete中添加:
gridComplete: function () { var ids = jQuery("#list4").jqGrid("getDataIDs"); for (var i = 0; i < ids.length; i++) { var id = ids[i]; modify = "<a href=\"#\" style=\"color:#f60\" onclick=\"Delete(" + id + ")\">Delete</a>"; jQuery("#list4").jqGrid("setRowData", id, { operDel: modify }); } }
4)改变list中某一列数据的样式,例如颜色,字体等
利用列的cellattr属性:
{name:'name',index:'name', width:100, cellattr:function(rowId, val, rawObject, cm, rdata) { return "style='color:red;font-weight:bold; text-decoration:underline'"; } }
5)关于jqGrid的theme, 从3.5版本开始,jqGrid完全支持jquery UI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme
6)关于datatype: "local"
jqGrid可支持的数据类型:xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。
在初始化的时候,若不想执行表格的初始化方法,则需要设置url为空,datatype设置为"local",否则会有js错误,导致页面上的button按钮不起作用
设置url的值,在.net mvc架构下,即“/controller/action/”这样的格式,第一个"/"是必须的,否则不能进入后台的action中。
在设置了url后,还要注意的问题就是datatype要与postData的数据类型相匹配,否则会有错误。例如datatype:"json",那么postData需要传的是json对象。
最后,例子很随意,凑合着看吧
相关推荐
jqgrid treegrid功能的修改
JQuery插件 jqGrid常用属性说明
jqGrid 按多个条件 或单个条件进行查询
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid实现类似Excel录入功能
jqGrid案例,经典搜索,异步,里面包括添加、删除、修改等日常操作,此程序是我用codeIgnite(CI)框架程序,压缩包内还有数据库文件,下载下来直接修改数据库配置文件即可预览,功能很强大,是php程序,希望下载者注意
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
jqgrid
可先参考下我的博客:http://blog.csdn.net/qq805911956/article/details/51262506
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid中文文档API,使用JQGRID
网上收藏的 jqGrid中文说明文档——选项设置 挺实用的
Jqgrid json 自身带的分页功能, 为了减轻数据库压力和提高加载速度,生成了纯JSON文件,想在本地自动分页,找了N多API均没有详细的介绍,最终摸索出来一个属性本身就自带分页功能,与大家分享
jquery jqgrid 参数详
JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件
利用jqGrid实现类似Excel录入功能
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
。
。