你的位置:首页 > Java教程

[Java教程]分享一个我的JavaScript版GridView多功能表格


GridView是什么?

GridView是由Mr.Co开发的一套开源的多功能表格插件,主要用于让页面开发者在开发中节省拼接Table表格和操作Table表格相关复杂操作的开发成本与时间。开发人员可以用GridView快速开发出带有集成编辑、组合表头、分页、表行列操作等一系列功能的GridView。GridView依赖于jQuery类库开发而成,它可以使用在任何Web页面中,比较适合后端项目使用。

主要特点

  • 快速:体积小,加载速度快
  • 开源:开放源代码,高品质
  • 扩展:基于对象库的设计,可根据需求增减功能
  • 风格:修改GridView风格非常容易,只需修改一个 CSS 文件
  • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

快速使用

1 /**引入皮肤样式**/2 <link href="gridview.css" rel="stylesheet">3 /**引入jQuery类库**/4 <script src="jquery.js"></script>5 /**引入gridview类库**/6 <script src="gridview.js"></script>7 /**页面中新增一个容器元素**/8 <div id="grid"></div>

 1 //初始化 2 GridView({ 3   container: $('#grid'), 4   dataSource: [ 5     {  6       id: '006',  7       name: "张三",  8       age: "47",  9       sex: '男', 10       address: "重庆市", 11       income: '100W' 12     }13   ],14   columns: [15     { 16       name: '系统编号', 17       field: 'id', 18       order: 0, 19       width: 100, 20       titleAlign: 'center', 21       contentAlign: 'left', 22       display: '' 23     },24     { 25       name: '年龄', 26       field: 'age', 27       order: 2, 28       width: 60, 29       titleAlign: 'center', 30       contentAlign: 'center', 31       link: '/main.html?key={id}' 32     }33   ]34 });

 

 

 

初始化参数配置

 1 //表格容器 2 container: $('body') 3  4 //表格唯一ID 5 id: 'gridView' + parseInt(100000000 * Math.random()) 6  7 //是否隐藏表格头部 8 hidenHead: false 9  10 //是否为组合表头 11 groupHead: { 12   //如果为组合表头必须设置为true 13   isGroup: false, 14     template: $('#gridview_head').html() 15 }, 16  17 //表格行checkbox是否为单选,false : 非单选 true : 单选 18 singleSeleted: false 19  20 //表格默认样式名称 21 className: 'gridView' 22  23 //行间隔-高亮变色行样式名称 24 columnHighClassName: 'highBack' 25  26 //主键ID,如果不设置将会导致行更新操作时获取不到主键ID 27 dataKeyID: 'id' 28  29 //当数据不够分页条数行的时候填充空白行 30 columnFilling: false 31  32 //是否需要显示表格行checkbox可选功能, false : 不显示 true : 显示 33 selectedColumn: true 34  35 //是否添加行序号, false : 不显示 true : 显示 36 columnNo: true 37  38 //行合并,默认为全部不合并 39 mergeRows: { 40   //是否合并 false : 不合并 true : 合并 41   isMerge: false, 42     //需要合并的列索引,不给此属性,默认合并所有列 43     index: [0, 1, 2, 3, 4, 5] 44 } 45  46 //数据表格格式设置,表格数据显示规则就靠它了 47 columns:[ 48   { 49     //需要映射的字段Key 50     field:'name', 51     //表格头部标题 52     name:'姓名', 53 //表格列排序,数字越小越靠前 54 order:1, 55   //表格宽度 56   width:200, 57   //表格头部标题显示位置,属性与CSS中的text-align属性一致 58   titleAlign:'center', 59   //表格内容部分显示位置,属性与CSS中的text-align属性一致 60   contentAlign:'center', 61   //控制该列是否显示 block 显示 none 不显示 62   display:'none', 63   //当该属性存在,clickCallback不存在的时候,当前元素会变成一个超链接 64   link:'http://www.baidu.com', 65   //监听当前元素的点击事件 66   clickCallback:function(){ 67   //当前元素对象 68   var _$this = $(this); 69 }, 70 //返回格式化后的数据信息显示到表格中 71 formatCallback: function ($this) { 72   return $this.text() == '张三' ? '张三好帅' : '王五好帅'; 73 } 74 } 75 ] 76  77 //编辑列设置属性配置 78 editColumn:[ 79   { 80     //操作名称 81     name: '删除', 82     //操作类型,预定义类型有 delete(删除)、update(表格编辑)、common(自定义)三种类型 83     type: 'delete', 84     //当type为delete、update时候需要设置action的ajax请求地址,传参方式在{}括号中填写相对于的数据源中所映射的Key名称便可 85     action: '/main.ashx?key={id}', 86     //是否显示操作项 87     visible: true, 88     //在操作名称后面追加其它HTML元素,这里我用于做间隔 89     after: '<span>|</span>', 90     //在当前操作项中追加一个ICON操作图片,也可以追加其它HTML元素 91     append: '<img src="btn_save.gif" />', 92     //监听当前编辑元素的点击事件 93     clickCallback:function (actionType, actionURL) { 94       //actionType 获取当前的操作type, 比如delete或者update 95       //actionURL 获取到解析后的action地址,用于ajax请求 96       //this为当前编辑元素对象,你拿到它可以做其它相关DOM操作 97       var _$this = this; 98     }, 99     //返回格式化后的数据信息替换操作名称100     formatCallback:function (data) {101       //data 当前一行的data数据102       if (data.id == '001')103         return '恢复';104       else105         return '删除';106     }107   },108   {109     //操作名称110     name: '更新',111     //操作类型,预定义类型有 delete(删除)、update(表格编辑)、common(自定义)三种类型112     type: 'update',113     //定义编辑时显示的表单类型114     columns: [115       {116         //现在的列索引位置117         rowIndex: 1,118         //表单类型,可以是所以表单类型,比如select、text、passwod等等119         type: 'hidden',120         //表单名称121         name: 'hidID'122       },123       {124         //现在的列索引位置125         rowIndex: 2,126         //表单类型,可以是所以表单类型,比如select、text、passwod等等127         type: 'select',128         //表单名称129         name: 'ddlCity',130         //select异步请求数据源的ajax地址131         action: '/main.ashx',132         //数据对象133         dataSource: [134           { id: '010', name: '北京市' },135           { id: '023', name: '重庆市' }136         ],137         //select绑定的value138         dataKeyID: 'id',139         //select绑定的text140         dataKeyText: 'name'141       }142     ],143     after: '<span>|</span>',144     append: '<img src="xg.gif" width="48" height="22" />',145     saveAppend: '<img src="btn_save.gif" width="48" height="22" />',146     clickCallback: function (actionType, actionURL) {147       alert('点击更新');148       //返回true时,行内会执行colums配置的编辑样式,false时将会被忽略149       return true;150     }151   }152 ]153 154 //分页属性配置155 pages:{156   //是否显示分页, block或者不设置display属性 = 显示 none = 不显示157   display: 'none',158     //默认页码159     index: 0,160     //每页显示条数161     size: 8,162     //总条数163     count: 24,164     pageClickEvent: function (index/*当前页码*/, grid/*GridView引用对象,用于再次调用绑定表格数据,不调用绑定方法则表格数据不会更新*/) {165     //在这里写请求后台拿数据的Ajax调用166     //然后再次调用167     grid.ResetBindData([{ id: '001', name: "张三", age: "32", sex: '男', address: "北京市", income: '100W' }, { id: '002', name: "王老五", age: "23", sex: '男', address: "重庆市", income: '100W' }]);168   }169 }170 171 //行单击监听方法172 columnClickHandle:function(){173   var _$this = $(this)174 }175 176 //行双击监听方法177 columnDBClickHandle:function(){178   var _$this = $(this)179 }180 181 //行复选框的change事件监听方法182 checkboxChangeHandle:function(){183   var _checked = data.checked,184     _value = data.value;185 }

官网地址:http://gridview.mrco.cn