1. 列配置數(shù)組

columns:[{}]

2. 所有列的默認配置對象, 在列的具體配置中會覆蓋這里的配置項

defColumns:{}

3. 列的具體配置

title: 該列表頭顯示的文本

title: '學號' //普通文本
title: '<input type="checkbox">' //html字符串

field: 'name'

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

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

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

className: 'class1 class2' //空格分隔多個類

width: 30 //相當于30px
width: '30' //相當于30px
width: '30px'
width: '30%' //百分比

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

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

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

function（rowData, rowIndex, colIndex, colObj, options）{
    /*this 指向該$td*/
    //rowData: 該行數(shù)據(jù)對象
    //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; //返回行數(shù)據(jù)對象的字段
    return '--'; //返回普通內容
    return '<span>'+rowData.id+'</span>'; //返回html字符串
    return $('<span>'+rowData.id+'</span>'); //返回jquery對象， 克隆該對象(包含事件)
}

4. 列配置示例

$(function () {
    var config = {
        data: tableData,    //本地數(shù)據(jù)源
        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);
});