分享一个我的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