黑马程序员技术交流社区

标题: 【石家庄校区】JQGRID基础笔记 [打印本页]

作者: 三胖的减肥之路    时间: 2017-12-14 11:43
标题: 【石家庄校区】JQGRID基础笔记
本帖最后由 三胖的减肥之路 于 2017-12-14 12:44 编辑

一、JQGRID是一个JQuery的列表生成框架,多用于生成列表
[JavaScript] 纯文本查看 复制代码
jQuery(选择器).jqGrid({
                                subGrid : false,
                                url : 地址,
                                mtype :"POST",
                                datatype : "json",
                                height : 450,
                                colNames : ['编码', '标准','项目','价格','单位','时间'],
                                colModel : [
                                        {
                                        name : 'fCode',
                                        index : 'fCode',
                                        label : '编码',
                                        key:true,
                                        width : 160,
                                        sorttype : "string",
                                        search : false
                                }],
                                sortname : "fcode",
                                sortorder : "asc",
                                viewrecords : true,
                                rowNum : 10,
                                rowList : [ 10, 20, 30 ],
                                pager : pager_selector,
                                altRows : true,
                                //toppager : true,
                                multiselect : true,
                                //multikey : "ctrlKey",
                        multiboxonly : true,
                                loadComplete : function() {
                                        var table = this;
                                        setTimeout(function(){
                                                styleCheckbox(table);
                                                updateActionIcons(table);
                                                updatePagerIcons(table);
                                                enableTooltips(table);
                                        }, 0);
                                },
                                editurl : "${contextPath}/sys/sysuser/operateSysUser"
                                grouping : true,
                                groupingView : {
                                         groupField : ['name'],
                                         groupDataSorted : true,
                                         plusicon : 'fa fa-chevron-down bigger-110',
                                         minusicon : 'fa fa-chevron-up bigger-110'
                                },
                                */
                        });
                        


二、关于把部分代码的解释与注意事项
  2.1注意事项
      colNames和colModel的长度是一样的,不能随意变化
      colNames的内容和colModel的内容关联关系是根据书写顺序决定的
      colModel中的label对于表格页面展示的影响不大
      colModel的width在一定范围内是成比例的,但是对于一些特殊情况需要手动增加宽度,否则宽度并不准确
      可以设置排序列和排序方式,减轻后台压力
      使用这个插件在一定范围内是非常方便的,但是有时候业务需求变化时,他的变化不够灵活,需要专门设置
      注意使用场景,用于弹窗形式,还是用于页面直接展示,需要根据情况进行初始化,需要先清空缓存再初始化

  2.2 API介绍
      本想附上API,但帖子限长,所以,下一贴只放API



























作者: Yin灬Yan    时间: 2017-12-14 12:03
我来占层楼啊   




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2