学习JQ{Grid}阶段小结

学习JQ{Grid}阶段总结

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

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

有图有真相

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

页面引用文件:

 <!―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");
            }
        }
    });
};

稍后放出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