学习JQ{Grid}阶段总结

2014-03-18修改原上传文件部分BUG

1.性别下拉框

——出现undefined的现象 把数据源"1:男;0:女;" 最后一个分号去掉

("1:男;0:女;"-->"1:男;0:女")

2.后台数据没有显示

——后台json数据内引号”修改为“”传到页面输出

（简单转义双引号"-->“”）

ps：已上传文件不再做修改上传

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

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

有图有真相

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

demo示例

——新增、编辑、删除、搜索、刷新以及列表select项的显示、提交菜单自定义验证等内容

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

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

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

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

下载地址

页面引用文件:

 <!—jquery基本文件-->    <script src="../js/jquery.min.js" type="text/javascript"></script>    <!--jquery ui 的CSS样式文件-->    <link href="../css/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" />    <!--JqGrid插件的样式文件-->    <link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />    <!--jquery-ui 文件-->    <script src="../js/jqgrid/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>    <!--JqGrid插件的中文配置文件-->    <script src="../js/jqgrid/grid.locale-cn.js" type="text/javascript"></script>    <!--JqGrid本身的JS压缩文件-->    <script src="../js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>    <!--动态调节jqgrid尺寸大小的配置文件-->    <script src="../js/jqgrid/jquery.wresize.js" type="text/javascript"></script>    <!--my js-->    <script src="../js/common.js" type="text/javascript"></script>    <script src="../js/MyJqueryMethod.js" type="text/javascript"></script>    <script src="../js/myJqgrid.js"></script>    <script type="text/javascript">

/** 返回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");            }        }    });};

参考

官方地址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