SlickGrid 基本方法篇

前言：SlickGrid 是一个Javascript编写的数据控件，其采用数据虚拟显示的特性备受后来的Grid推崇，如ExtJS DataGrid，其架构设计优秀，UI交互功能非常丰富，插件化的可扩展功能开发非常值得Web开发人员学习，本文列出基本方法的使用，供开发人员参考；并在后文继续总结列出已经开发出的插件，以供开发人员参考。

0. SlickGrid 基本样式示例

功能包括：

1）首列复选框；

2）编辑器：文本编辑框，下拉框，复选框，日期控件，长文本编辑器，数字格式编辑器，YesNo编辑器等；

3）列排序，列字段值过滤，列冻结；

4）分页：客户端分页和服务端分页；

5）多字段组合查询；

6）各种列样式指定，行样式设定；

其它扩展功能依然可以通过插件完成。

1. Grid初始化及数据绑定 new、setItems、setSelectionModel

var gridView;
var grid;
var data = [];
var columns = [
    { id: "id", name: "id", field: "id", behavior: "select" },
    { id: "code", name: "入库单编号", field: "code"},
    { id: "ctemp1", name: "明细款号", field: "ctemp1" }
];
var options = {
    editable: true,
    enableCellNavigation: true,
    enableColumnReorder: true,
    asyncEditorLoading: true,
    forceFitColumns: false,
    topPanelHeight: 25
};
ajaxPost('/Stk/StkInm/StkInmSearch/' + id,
JSON.stringify(id),
function (result) {
        data = result;
        gridView = new Slick.Data.DataView({ inlineFilters: true });
        grid = new Slick.Grid("#GridSearch", data, columns, options);
        gridView.setItems(data, "id");
        grid.setSelectionModel(new Slick.RowSelectionModel());
}

2. 隐藏列 setColumns
1) 代码设置隐藏：

var visibleColumns = [];//定义一个数组存放显示的列     
for (var i = 0; i < columns.length; i++) {
    if (i!=0)
       visibleColumns.push(Columns[i]);//将columns的列push进去
}

2)设置grid的列

grid.setColumns(visibleColumns);

3)右键菜单设置隐藏：

var columnpicker = new Slick.Controls.ColumnPicker(columnsSearch, gridSearch, options);

4)当点击菜单选项时，在columnpicker控件中，有方法调用：

grid.setColumns(visibleColumns);

3. 数据分页 onDataPagedEvent

//分页事件
var onDataPagedEvent = function (e, args) {
    var pageNum = args.pageNum;
    var pageSize = args.pageSize;
    loadGridPaged(pageNum, pageSize, $('#TB_Search').val());
};
//分页数据获取方法封装
function loadGridPaged(pageNum, pageSize,txt) {
    var pagetxt = {
        searchtxt: txt,
        pageNum: pageNum,
        pageSize: pageSize
    }


    ajaxPost('/Stk/StkInm/StkInmSearch/' + pagetxt,
                    JSON.stringify(pagetxt),
                function (result) {
            data = result.t;
            var rowCount = result.s;
            var pageCount = Math.ceil(rowCount / pageSize);


                   var pageInfo = {}