[转载]自己动手--基于jQuery的表格控件

[转载]自己动手—-基于jQuery的表格控件(更正DEMO下载地址) – 会动的稻草人 – 博客园.

控件效果图:

一、功能说明
1、使用简单、扩展方便。
2、表格样式可自定义,只需修改相应的CSS样式即可。
3、支持行点击事件自定义。
4、支持复选框选择行。
5、执行列排序(支持数字、日期时间、英文、汉字等)。
6、支持自定义行按钮及按钮事件(如编辑、删除按钮等)
7、支持自定义数据的显示样式(根据当前数据或当前行数据)
8、支持分页显示数据,且在插件内部实现分页处理。
二、使用说明

该插件的使用,基本只需两个步骤即可,一个是表格的声明(创建),然后就是数据的加载。1、表格的声明(创建)

            var objTable = new HyTable({
                columns: [
                    {name: '姓名', mapping: 'username', type: 'string', width: '100',
allowSort: true, renderer: function(val){return val;}}
                ],                      //(array)列信息
                emptyMsg: "暂无数据",   //(string)无数据时的提示信息
                renderTo: "",           //(string)表格容器,必须是HTML元素的ID属性值
                model: 'remote',       //(string)模式,远程(remote)or本地(local)
                url: '',                //(string)远程模式的获取数据的url地址
                allowPaging: true, (bool)//是否分页
                pageSize: 20,            //(int)每页显示的行数
                checkSelected: false,    //(bool)复选框选择
                selectedField: "",      //(string)复选框选中字段
                stripeRows: false,      //(bool)是否启用隔行变色 默认不启用
                onRowClick: null        //(function)行点击事件
            });

2、表格数据的加载

            objTable.loadData(1,data);
//第一个参数为加载页的页索引,第二个参数有两种情况,
1:如果参数内容是JSON对象,
则表示是查询的查询条件,如果是数据,则表示直接加载本地数据到表格中。
三、各参数意义(API)
columns:
参数类型:json数组

表格的列定义

    {
        name:'列头名称',
        mapping:'code',                                 //(string)映射JSON数据中的键名称
        width:'100',                                    //(string)列宽度,可数字或百分比等
        allowSort:true,                                 //(bool)是否排序
        type:'string/int/float/datetime/action',        //(string)数据类型或列类型,前四个为数据类型,为action表示为操作列,放置按钮用
        renderer:function(val,json){return "内容前加文字"+val;},
 //(function)列渲染函数function,参数为当前单元格的值及当前行的数据
        content:[{text:'修改',code:'edit',handler:function(data),renderer:function(data){return false or true;}}]
//按钮列的按钮,可为JSON数组表示多个或一个按钮
        //handler 为当前按钮的点击事件,参数为JSON格式的当前行数据。
        //renderer 为控制当前按钮是否显示的事件,可选,参数为JSON格式的当前行数据,主要用于根据当前行数据决定是否显示该按钮用。
返回false则表示按钮不显示,返回true则显示。
    }
emptyMsg:
参数类型:string

数据为空时,显示的提示文字,如:暂无数据。

renderTo:
参数类型:string

表格的父级容器,为HTML元素的ID属性值

model:
参数类型:string

(默认为“remote”)表格数据加载模式,值为“remote”则表示从远程加载表格数据,为“local”则表示从本地加载数据

url:
参数类型:string

(仅在model=”remote”时有效)远程数据加载地址

allowPaging:
参数类型:bool

(默认为“true”)是否分页显示数据,仅远程加载表格数据才支持分页。

pageSize:
参数类型:int

(默认为“20”,仅在allowPaging=true时有效)每页显示的记录数

checkSelected:
参数类型:bool

(默认为“false”)是否启用复选框选择数据,启用后,可使用getSelected()方法获取选中的数据,多条以逗号间隔

selectedField:
参数类型:string

(仅在checkSelected=true时有效)选中数据时,用以标识数据的主键字段

stripeRows:
参数类型:bool

(默认为“false”)是否启用表格隔行变色效果

onRowClick:
参数类型:function(json)

行点击时触发的事件,方法参数为JSON格式的当前点击行数据。可使用(json.字段名)获取数据

四、开发思路

主要是在开发该插件时的想法及部分注意事项,方便后期同事维护该插件。

1、表格生成过程:创建表格(主要为列头)(绑定列排序点击事件等)–> 加载数据 (绑定行点击事件、复选框选中、行中按钮定义、单元格数据显示)2、loadData(1,data)方法的第二个参数,如果是远程加载数据,则该参数内容为查询条件的JSON格式。查询数据时,将查询条件组织成JSON格式,然后调用该方法即可。3、插件在获取分页数据时,会自动往后台传入start及end两个参数,即获取数据的起始行及结束行,
如每页显示20条,则获取第5页数据时,会传入start=80,end=100这两个参数,这也方便oracle数据库获取数据。4、定义按钮操作列时,code字段不能为空,该字段主要是绑定按钮事件时,查询按钮用。
另外,在插件中所在的JS文件中,我还放置了一个简单的将JSON格式数据加载到表单中的方法$(obj).loadForm(data),其中data为JSON格式数据。
该功能与JQuery中的serializeArray()方法相反,serializeArray()方法将一个指定HTML元素中的输入项的值序列化为JSON对象,
而loadForm(data)方法则是将JSON对象赋值到指定HTML元素中的输入项。
DEMO下载地址:http://115.com/file/e7sxriym#JQuery.HyTable表格Demo.rar
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏