学习JQ{Grid}阶段小结

2013-10-08

学习JQ{Grid}阶段总结jqGrid 是一个用来显示网数据的jQuery插件，文档比较全面，附带中文版本。主要特点：——Ja

学习JQ{Grid}阶段总结

jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。

主要特点：
——JavaScript接口的完全控制
——从服务器返回的数据是XML
——简单配置
——能够加载大数据集(分页)
——可改变列的大小
——服务器端进行排序
——支持链接、图像、复选框
——单页上，您可以添加多个网格(主-详细信息)

有图有真相

学习JQ{Grid}阶段小结

PS：手机，邮箱都是自己随便输入的

页面引用文件:

/** 返回json格式中最好默认带有ID列  默认显示 20列* 列表id= "gridTable"  列表url = 'Handler.ashx?action=page'  列表datatype = 'json'  列表colNames = ['ID', "名称", '性别', '手机', '邮箱']  列表colModel = 。。。  列表标题 caption = "用户列表"  列表修改URL editurl ="Handler.ashx?action=oper"  列表默认排序 sortname = "ID";  页码ID gridPagerID ="gridPager"*///最后选中的行var  lastsel;function  myJqGrid(id, url, datatype, colNames,colModel, caption, editurl, sortname, gridPagerID) {    Var  myGrid = $("#"+ id);   myGrid.jqGrid({        url:url,       datatype: datatype,       rowNum: 20,        rowList:[10, 20, 50],       colNames: colNames,       colModel: colModel,       jsonReader: {           repeatitems: false,           root: function (obj) { returnobj.rows; },           page: function (obj) { returnobj.pageindex; },           total: function (obj) { returnobj.pagecount; },           records: function (obj) { returnobj.total; }        },       prmNames: {           page: 'PageIndex',           rows: 'PageSize',           sort: 'Order',           order: 'Sort'        },        hidegrid: false,       rownumbers: true,       loadonce: false,       sortname: sortname,       sortorder: 'desc',       pager: "#" + gridPagerID,       viewrecords: true,       caption: caption,       toolbar: [true, "top"],       altRows: true,        //最后选中的行       onSelectRow: function (id) {            if(id && id !== lastsel) {               grid.jqGrid('restoreRow',lastsel);               lastsel = grid.jqGrid('getRowData',id)[sortname];            }        },       editurl: editurl    });   initToolbar(id, gridPagerID);}//初始化//新增/编辑/删除/搜索/刷新等工具栏function  initToolbar(id, gridPagerID) {    $("#" + id).jqGrid('navGrid','#' + gridPagerID,        //options        {           edittext: '编辑', addtext: '添加', deltext: '删除'            ,searchtext: '搜索', refreshtext: '刷新'        },        //edit options        {closeAfterEdit: true, reloadAfterSubmit: true,afterComplete: submitSucceed },        //add options        {closeAfterAdd: true, reloadAfterSubmit: true,afterComplete: submitSucceed },        //del options        {reloadAfterSubmit: true, afterComplete: submitSucceed },        //search options        //,  multipleSearch:true, multipleGroup:true,showQuery: true        {closeAfterSearch: true, closeOnEscape: true}    );}var  result;//完成事件// 返回json标准格式{success:true,msg:'提示信息！'}function  submitSucceed(inResp, inPData, inFormId) {    if(inResp.statusText == "OK"){       result = eval('(' + inResp.responseText + ')');        if(!result.success) {           msgInfo(result.msg);        }    }    return}//提示信息统一弹窗// 统一ID= "dialogMessage"function  myDialog(msg){    vardialogID = $("#dialogMessage");   dialogID.html(        "<span class='ui-icon ui-icon-circle-close' style='float: left;margin: 0 7px 10px 0;'></span>" + msg);   dialogID.dialog({       modal: true,       buttons: {           Ok: function () {               $(this).dialog("close");            }        }    });};

稍后放出demo示例

——因为以.net环境为主，封装了些方法，单纯的json数据没显示出来，抱歉

——项目中是能运行的，这也只是做个jqgrid的前后异步调用引子

网上有很多JQGrid的文档api，这里就不赘述太多，都可一一详查
更多学习还望大家多多讨论，有什么不妥的地方，大家一起学习

有兴趣的可以下载整理好的代码

下载地址

参考

官方地址1：http://www.trirand.com/blog/

官方地址2：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

官方demo：http://trirand.com/blog/jqgrid/jqgrid.html

热点排行

Web前端

学习JQ{Grid}阶段小结