jqGrid显示和隐藏列示例

　　jqGrid显示和隐藏列示例，相关配置查看：jqGrid显示和隐藏列

jqGrid显示和隐藏列示例

<html>    
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jqGrid显示和隐藏列示例</title>
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"> </script>
<!--导入jqgrid中文语言包-->
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"> </script>
<!--注意导入setcolumns插件，要不调用setColumns会报错-->
<script src="plugins/grid.setcolumns.js"></script>
</head>    
<body>
<table id="grid"></table>
<input type="button" value="显示列操作对话框" onclick="showColumnDialog()" />
 <script type="text/javascript">
     //$.jgrid.col = { caption: "显示隐藏jqGrid列", bSubmit: "确定", bCancel: "取消" };//未导入中文语言包可以这样定义选择列弹窗显示内容
     function showColumnDialog() { $("#grid").jqGrid('setColumns', { modal: true }); }
     $(function () {
         var edu = { "1": "大专及以下", "2": "本科", "3": "硕士", "4": "博士及以上" };
         $("#grid").jqGrid({
             url: 'data.txt',
             datatype: "json",
             jsonReader: { repeatitems: false, root: "list" },
             height: 150,
             caption: 'jqGrid显示和隐藏列示例',
             colNames: ['ID', '姓名', '学历'],
             colModel: [
                   { name: 'id' },
                   { name: 'name' },
                   {
                       name: 'edu',
                       //自定义格式化和反格式化函数
                       //将value转换为对应的text
                       formatter: function (v, opt, rec) { return edu[v]; },
                       //先注释掉unformat，修改过一次select后调用getRowData方法查看数据
                       unformat: function (v) { for (k in edu) if (edu[k] == v) return k; return '1'; }//将text转换为存储的value值，注意unformat的参数为单元格显示的内容，既选择的option的text内容
                   }
             ]
         });
     });
 </script>    
</body>    
</html>

data.txt

{"list":[{"id":1,"name":"test1","edu":1},{"id":2,"name":"test2","edu":2},{"id":3,"name":"test3","edu":3},{"id":4,"name":"test4","edu":4}],"lastPageNo":20,"total":200}

 

加支付宝好友偷能量挖...


原创文章，转载请注明出处：jqGrid显示和隐藏列示例

评论(0)Web开发网
阅读(1906)喜欢(2)jqGrid中文API