分享一个我的JavaScript版GridView多功能表格

GridView是什么？

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

主要特点

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

快速使用

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

 //初始化
 GridView({
     container: $('#grid'),
     dataSource: [
         {
             id: '006',
             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}'
         }
     ]
 });

初始化参数配置

 //表格容器
 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;
 }

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