fish表格

0x00 demo

$("#grid01").grid({
    data: [
        {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
        {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
    ],
    height: 220,
    colModel: [
        {
            name: 'id',
            sorttype: "int",
            label: 'Inv No',
            key:true
        }, {
            name: 'invdate',
            label: 'Date',
            width: 90,
            sorttype: "date",
            formatter: "date",
            headertitle : '时间' //列头的提示
        }, {
            name: 'name',
            label: 'Client',
            width: 100,
            title: false //内容没有提示
        },  {
            name: 'tax',
            label: 'Tax',
            width: 80,
            sorttype: "float",
        }, {
            name: 'total',
            label: 'Total',
            width: 80,
            sorttype: "float",
            // formatter: function(cellval, opts, rwdat, _act) {
            //     return '<div class="btn-group">' +
            //         '<button id="btn1" type="button" class="btn btn-default firstOne js-delete" data-content="Popover on left">Delete</button>' +
            //         '<button type="button" class="btn btn-link js-edit">Edit</button>' +
            //         '</div>'
            // },
        }, {
            name: 'note',
            label: 'Notes',
            width: 100,
            sortable: false
        }
    ],
    showColumnsFeature: true, // 自动捕获grid控件的全部列，并选择展示
    columnMenu: true, // 开启列功能菜单
    rowNum: 5, //一页显示的行数
    pager: true, //
    multiSort:true // 多列排序
});

使用列功能菜单时可不用单独配置过滤排序等功能，若单独使用则需要单独配置这些功能，另外不知为何列筛选功能无法正常使用，在演示网站可以直接使用，但是代码下下来就无法正常工作，这里先记录下来，日后搞懂了再更新。