codecamp

列配置

1. 列配置数组

columns:[{}]

2. 所有列的默认配置对象, 在列的具体配置中会覆盖这里的配置项

defColumns:{}

3. 列的具体配置

title: 该列表头显示的文本

title: '学号' //普通文本
title: '<input type="checkbox">' //html字符串
field: 指定要显示在该列的数据源中的字段名
field: 'name'
defaultContent: 数据为空值时要显示的默认值

defaultContent: '--' //普通字符串
defaultContent: '<span>--</span>' //html字符串
defaultContent: $('<span>--</span>') //jquery对象, 克隆该对象(包含事件)
defaultContent: $("#add") //查找出来的jquery对象, 克隆该对象(包含事件)

sort: 排序控制, 如果要对该列进行排序, 则必须配置field属性.

sort: true //在该列等待排序(默认)
sort: 'desc' //倒序
sort: 'asc' //升序
sort: false //该列禁用排序
className: 要添加到该列的css类
className: 'class1 class2' //空格分隔多个类
width: 列宽, 作用于th
width: 30 //相当于30px
width: '30' //相当于30px
width: '30px'
width: '30%' //百分比
textAlign: 该列内容的水平对齐方式
textAlign: 'center'
textAlign: 'left'
textAlign: 'right'
verticalAlign: 该列内容垂直对齐方式

verticalAlign: 'middle'
verticalAlign: 'top'
verticalAlign: 'bottom'
tooltip: 在该列单元格使用鼠标悬停提示

//提示内容为该单元格的原始值
tooltip: true
 
//使用普通字符串作为提示内容
tooltip: '提示内容'
 
//使用html字符串作为提示内容
tooltip: '<span>提示内容</span>'
 
//使用数值作为提示内容
tooltip: 1234567890
 
//使用jquery对象作为提示内容(克隆该对象, 包含事件)
tooltip: $('<span>提示内容</span>') 
 
//使用查找出来的jquery对象作为提示内容(克隆对象, 包含事件)
tooltip: $("#x1") 
 
//禁用(默认)
tooltip: false
render: 列内容渲染函数
function(rowData, rowIndex, colIndex, colObj, options){
    /*this 指向该$td*/
    //rowData: 该行数据对象
    //rowIndex: 该行在该页的索引
    //colIndex: 列索引
    //colObj: 该列的配置对象
    //options: 表格配置对象
 
    /*设置tooltip, 这里的设置会覆盖tooltip配置*/
    this.data("title", "提示:" + rowData.id); //普通字符串
    this.data("title", '<span style="color:red;">提示:'+ rowData.id +'</span>'); //html字符串
    this.data("title", $('<span style="color:red;">提示:'+ rowData.id +'</span>')); //jquery对象
        /*这里返回的内容会覆盖field配置*/
    return rowData.id; //返回行数据对象的字段
    return '--'; //返回普通内容
    return '<span>'+rowData.id+'</span>'; //返回html字符串
    return $('<span>'+rowData.id+'</span>'); //返回jquery对象, 克隆该对象(包含事件)
}

4. 列配置示例

$(function () {
    var config = {
        data: tableData,    //本地数据源
        columns: [
            {
                title: '<input type="checkbox">',
                sort: false,
                width: '20',
                render: function () {
                    return $('<input type="checkbox">');
                }
            },
            {
                title: '学号',
                field: 'id',
                className: 'success'
            },
            { title: '姓名', field: 'name' },
            {
                title: '年龄',
                field: 'age',
                sort: 'asc',
            },
            {
                title: '学分',
                field: 'grade',
                defaultContent: '<span style="color:red;">--</span>'
            },
            {
                title: '电子邮箱',
                field: 'email',
                defaultContent: $("#add")
            }
        ],
        defaultSize: 10 //页面大小
    };
    $("#test2").xjzTable(config);
});



基本使用
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }