列配置

1. 列配置數(shù)組

columns:[{}]

2. 所有列的默認(rèn)配置對(duì)象, 在列的具體配置中會(huì)覆蓋這里的配置項(xiàng)

defColumns:{}

3. 列的具體配置

title: 該列表頭顯示的文本

title: '學(xué)號(hào)' //普通文本
title: '<input type="checkbox">' //html字符串

field: 指定要顯示在該列的數(shù)據(jù)源中的字段名

field: 'name'

defaultContent: 數(shù)據(jù)為空值時(shí)要顯示的默認(rèn)值

defaultContent: '--' //普通字符串
defaultContent: '<span>--</span>' //html字符串
defaultContent: $('<span>--</span>') //jquery對(duì)象， 克隆該對(duì)象(包含事件)
defaultContent: $("#add") //查找出來(lái)的jquery對(duì)象， 克隆該對(duì)象(包含事件)

sort: 排序控制, 如果要對(duì)該列進(jìn)行排序, 則必須配置field屬性.

sort: true //在該列等待排序(默認(rèn))
sort: 'desc' //倒序
sort: 'asc' //升序
sort: false //該列禁用排序

className: 要添加到該列的css類(lèi)

className: 'class1 class2' //空格分隔多個(gè)類(lèi)

width: 列寬, 作用于th

width: 30 //相當(dāng)于30px
width: '30' //相當(dāng)于30px
width: '30px'
width: '30%' //百分比

textAlign: 該列內(nèi)容的水平對(duì)齊方式

textAlign: 'center'
textAlign: 'left'
textAlign: 'right'

verticalAlign:　該列內(nèi)容垂直對(duì)齊方式

verticalAlign: 'middle'
verticalAlign: 'top'
verticalAlign: 'bottom'

tooltip:　在該列單元格使用鼠標(biāo)懸停提示

//提示內(nèi)容為該單元格的原始值
tooltip: true
 
//使用普通字符串作為提示內(nèi)容
tooltip: '提示內(nèi)容'
 
//使用html字符串作為提示內(nèi)容
tooltip: '<span>提示內(nèi)容</span>'
 
//使用數(shù)值作為提示內(nèi)容
tooltip: 1234567890
 
//使用jquery對(duì)象作為提示內(nèi)容(克隆該對(duì)象, 包含事件)
tooltip: $('<span>提示內(nèi)容</span>') 
 
//使用查找出來(lái)的jquery對(duì)象作為提示內(nèi)容(克隆對(duì)象, 包含事件)
tooltip: $("#x1") 
 
//禁用(默認(rèn))
tooltip: false

render: 列內(nèi)容渲染函數(shù)

function（rowData, rowIndex, colIndex, colObj, options）{
    /*this 指向該$td*/
    //rowData: 該行數(shù)據(jù)對(duì)象
    //rowIndex: 該行在該頁(yè)的索引
    //colIndex: 列索引
    //colObj: 該列的配置對(duì)象
    //options: 表格配置對(duì)象
 
    /*設(shè)置tooltip, 這里的設(shè)置會(huì)覆蓋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對(duì)象
        /*這里返回的內(nèi)容會(huì)覆蓋field配置*/
    return rowData.id; //返回行數(shù)據(jù)對(duì)象的字段
    return '--'; //返回普通內(nèi)容
    return '<span>'+rowData.id+'</span>'; //返回html字符串
    return $('<span>'+rowData.id+'</span>'); //返回jquery對(duì)象， 克隆該對(duì)象(包含事件)
}

4. 列配置示例

$(function () {
    var config = {
        data: tableData,    //本地?cái)?shù)據(jù)源
        columns: [
            {
                title: '<input type="checkbox">',
                sort: false,
                width: '20',
                render: function () {
                    return $('<input type="checkbox">');
                }
            },
            {
                title: '學(xué)號(hào)',
                field: 'id',
                className: 'success'
            },
            { title: '姓名', field: 'name' },
            {
                title: '年齡',
                field: 'age',
                sort: 'asc',
            },
            {
                title: '學(xué)分',
                field: 'grade',
                defaultContent: '<span style="color:red;">--</span>'
            },
            {
                title: '電子郵箱',
                field: 'email',
                defaultContent: $("#add")
            }
        ],
        defaultSize: 10 //頁(yè)面大小
    };
    $("#test2").xjzTable(config);
});