列配置

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);
});