多功能表格插件,支持分页、列编辑、列排序、

GridView是什么? GridView是由Mr.Co开发的一套开源的多功能表格插件,主要用于让页面开发者在开发中节省拼接Table表格和操作Table表格相关复杂操作的开发成本与时间。开发人员可以用GridView快速开发出带有集成编辑、组合表头、分页、表行列操作等一系列功能的GridView。GridView依赖于jQuery类库开发而成,它可以使用在任何Web页面中,比较适合后端项目使用。 主要特点 快速:体积小,加载速度快 开源:开放源代码,高品质 扩展:基于对象库的设计,可根据需求增减功能 风格:修改GridView风格非常容易,只需修改一个 CSS 文件 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera 开源日志 2016-06:GridView正式开源 快速使用

/**引入皮肤样式**/ <link href="css/gridview.css" rel="stylesheet"/> /**引入jQuery类库**/ <script src="scripts/jquery.js"></script> /**引入gridview类库**/ <script src="scripts/gridview.js"></script> /**页面中新增一个容器元素**/ <div id="grid"></div> /**初始化gridview**/ GridView({ container: $('#grid'), dataSource: [ { id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }, { id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' } ], columns: [ { name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' }, { name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' }, { name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' }, { name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' }, { name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' }, { name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' } ] }); 初始化参数配置

//表格容器 container: $('body') //表格唯一ID id: 'gridView' + parseInt(100000000 * Math.random()) //是否隐藏表格头部 hidenHead: false //是否为组合表头 groupHead: { //如果为组合表头必须设置为true isGroup: false, template: $('#gridview_head').html() }, //表格行checkbox是否为单选,false : 非单选 true : 单选 singleSeleted: false //表格默认样式名称 className: 'gridView' //行间隔-高亮变色行样式名称 columnHighClassName: 'highBack' //主键ID,如果不设置将会导致行更新操作时获取不到主键ID dataKeyID: 'id' //当数据不够分页条数行的时候填充空白行 columnFilling: false //是否需要显示表格行checkbox可选功能, false : 不显示 true : 显示 selectedColumn: true //是否添加行序号, false : 不显示 true : 显示 columnNo: true //行合并,默认为全部不合并 mergeRows: { //是否合并 false : 不合并 true : 合并 isMerge: false, //需要合并的列索引,不给此属性,默认合并所有列 index: [0, 1, 2, 3, 4, 5] } //数据表格格式设置,表格数据显示规则就靠它了 columns:[ { //需要映射的字段Key field:'name', //表格头部标题 name:'姓名', //表格列排序,数字越小越靠前 order:1, //表格宽度 width:200, //表格头部标题显示位置,属性与CSS中的text-align属性一致 titleAlign:'center', //表格内容部分显示位置,属性与CSS中的text-align属性一致 contentAlign:'center', //控制该列是否显示 block 显示 none 不显示 display:'none', //当该属性存在,clickCallback不存在的时候,当前元素会变成一个超链接 link:'http://www.baidu.com', //监听当前元素的点击事件 clickCallback:function(){ //当前元素对象 var _$this = $(this); }, //返回格式化后的数据信息显示到表格中 formatCallback: function ($this) { return $this.text() == '张三' ? '张三好帅' : '王五好帅'; } } ] //编辑列设置属性配置 editColumn:[ { //操作名称 name: '删除', //操作类型,预定义类型有 delete(删除)、update(表格编辑)、common(自定义)三种类型 type: 'delete', //当type为delete、update时候需要设置action的ajax请求地址,传参方式在{}括号中填写相对于的数据源中所映射的Key名称便可 action: '/main.ashx?key={id}', //是否显示操作项 visible: true, //在操作名称后面追加其它HTML元素,这里我用于做间隔 after: '<span>|</span>', //在当前操作项中追加一个ICON操作图片,也可以追加其它HTML元素 append: '<img src="btn_save.gif" />', //监听当前编辑元素的点击事件 clickCallback:function (actionType, actionURL) { //actionType 获取当前的操作type, 比如delete或者update //actionURL 获取到解析后的action地址,用于ajax请求 //this为当前编辑元素对象,你拿到它可以做其它相关DOM操作 var _$this = this; }, //返回格式化后的数据信息替换操作名称 formatCallback:function (data) { //data 当前一行的data数据 if (data.id == '001') return '恢复'; else return '删除'; } }, { //操作名称 name: '更新', //操作类型,预定义类型有 delete(删除)、update(表格编辑)、common(自定义)三种类型 type: 'update', //定义编辑时显示的表单类型 columns: [ { //现在的列索引位置 rowIndex: 1, //表单类型,可以是所以表单类型,比如select、text、passwod等等 type: 'hidden', //表单名称 name: 'hidID' }, { //现在的列索引位置 rowIndex: 2, //表单类型,可以是所以表单类型,比如select、text、passwod等等 type: 'select', //表单名称 name: 'ddlCity', //select异步请求数据源的ajax地址 action: '/main.ashx', //数据对象 dataSource: [ { id: '010', name: '北京市' }, { id: '023', name: '重庆市' } ], //select绑定的value dataKeyID: 'id', //select绑定的text dataKeyText: 'name' } ], after: '<span>|</span>', append: '<img src="xg.gif" width="48" height="22" />', saveAppend: '<img src="btn_save.gif" width="48" height="22" />', clickCallback: function (actionType, actionURL) { alert('点击更新'); //返回true时,行内会执行colums配置的编辑样式,false时将会被忽略 return true; } } ] //分页属性配置 pages:{ //是否显示分页, block或者不设置display属性 = 显示 none = 不显示 display: 'none', //默认页码 index: 0, //每页显示条数 size: 8, //总条数 count: 24, pageClickEvent: function (index/*当前页码*/, grid/*GridView引用对象,用于再次调用绑定表格数据,不调用绑定方法则表格数据不会更新*/) { //在这里写请求后台拿数据的Ajax调用 //然后再次调用 grid.ResetBindData([{ id: '001', name: "张三", age: "32", sex: '男', address: "北京市", income: '100W' }, { id: '002', name: "王老五", age: "23", sex: '男', address: "重庆市", income: '100W' }]); } } //行单击监听方法 columnClickHandle:function(){ var _$this = $(this) } //行双击监听方法 columnDBClickHandle:function(){ var _$this = $(this) } //行复选框的change事件监听方法 checkboxChangeHandle:function(){ var _checked = data.checked, _value = data.value; } GridView表格支持以下多种功能 基本表格 编辑表格 分页表格 树状表格 组合头表格 参数配置

详情配置请移步GridView主页查看

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。