slickgrid插件

來自  besley

 

前言：在前篇文章中，總結了SlickGrid 的基本方法，SlickGrid其功能擴展主要靠插件技術；這也是體現出作者Melibman 架構設計的優秀之處。本文列出了Master版本提供的插件以外，另外特意列出了在項目中添加的新的插件，供SlickGrid的開發人員參考(目前會在分支版本中提供，並未合並到SlickGrid的主版本中去)。

 

1. 基本插件列表

 

 

插件名稱                               說明
//列單元格嵌入編輯器
TextEditor                             文本框編輯器,
IntegerEditor                          數字編輯器
DateEditor                             日期編輯器,
DropDownEditor                           下拉框編輯器,
YesNoSelectEditor                      YesNo選擇器
CheckboxEditor                           復選框編輯器
TextButtonEditor                       文本框按鈕編輯器,
PercentCompleteEditor                    完成百分比編輯器
LongTextEditor                           長文本編輯器
SelectCellEditor                       單元格選中編輯器

//擴充插件
slick.autotooltips                        自動提示插件
slick.cellcopymanager                     單元格復制管理器
slick.cellrangedecorator               范圍內單元格裝飾
slick.cellrangeselector                范圍單元格選擇器
slick.cellselectionmodel               單元格選定模型
slick.checkboxselectcolumn             復選框列格式插件
slick.dropdownlistcolumn               下拉框格式插件
slick.headerbuttons                    標題下拉按鈕
slick.rowmovemanager                   行移動管理器
slick.rowselectionmodel                行選擇模型

 

2.   插件注冊及使用

2.1  單元格嵌入編輯器

 

//在初始化列字段時候定義
var columnsProduct = [
 { id: "id", name: "產品編號", field:"ID"},
 { id: "ProductName", name:"產品名稱", field:"ProductName"，editor:Slick.Editors.TextButton },
 { id: "UnitPrice", name:"單價", field:"UnitPrice"，editor: Slick.Editors.Text },
{ id: "IsLuxury", name:"奢侈品?", field:"IsLuxury"，editor:Slick.Editors.Checkbox, formatter:Slick.Formatters.Checkmark },
 { id: "ModifiedDate", name:"修改日期", field:"ModifiedDate", fieldType: "datetime", editor: Slick.Editors.Date },
 { id: "Notes", name:"備注", field:"Notes", editor: Slick.Editors.LongText}
];

2.2 添加div等控件 Editors、formatter

 

//columns中加editor: Slick.Editors.Text 或者 加formatter:colFormatter

//字體描色
functioncolFormatter(row, cell, value, columnDef, dataContext) {
    if(dataContext.iscol == true&& value!="") {
        return"<div style='color:red; font-weight:bold;'>"+ value +"</div>";
    }
    else
       returnvalue;
}


//或者 加
//formatter:colFormatter
//字體描色
functioncolFormatter(row, cell, value, columnDef, dataContext) {
    if(dataContext.iscol == true&& value!="") {
        return"<div style='color:red; font-weight:bold;'>"+ value +"</div>";
    }
    else
        returnvalue;
}

2.3  grid注冊下拉框控件dropdownlist

 

varmtrPartJson = [];
varmtrPart;
//部位下拉框
functionaddMtrPartList() {
    ajaxGet('/WebFramework/Sampric/BindMtrPart/','',function(result) {
     if(result != null) {
        mtrPartJson = result;
      mtrPart = newSlick.DropDownListColumn({
            id: "part",name: "部位", field:"part",width: 82, dataSource: mtrPartJson
        });
        bomColumns.splice(4, 1,mtrPart.getColumnDefinition());
        }
    });
}

//注冊部位下拉框
gridBom.registerPlugin(mtrPart);

//界面元素渲染后，綁定事件
$("#slt_part").bind("change",onItemChanged);

//部位下拉框改變Item、維護頁彈出
varonItemChanged =function (e, args) {
    if ($(this).val()=="-1") {
        alert("彈出窗口，添加新選項...");
        $("#slt_part").append('<option value=10>My option</option>');
        //$(".editor-select").append('<optionvalue=10>My option</option>');
    }
    else {
        var item = gridViewBom.getItemByIdx(selectedRowIndex);
        item.part = $(this).val();
        gridViewBom.updateItem(item.ID, item);
        gridBom.updateRow(selectedRowIndex);
    }
};

2.4  注冊復選框列

 

 //添加復選框列
 var checkboxProduct = new Slick.CheckboxSelectColumn({
     cssClass: "slick-cell-checkboxsel"
 });
 columnsProduct.splice(0, 0,checkboxProduct.getColumnDefinition());

 //注冊復選框
gridProduct.registerPlugin(checkboxProduct);

 

2.5 注冊標題下拉框

 

//注冊HeaderMenu
var headerMenuPlugin = new Slick.Plugins.HeaderMenu({ "dataview": dataViewProduct });

gridProduct.registerPlugin(headerMenuPlugin);

 

3. 擴展控件

3.1 擴展控件列表

 

    控件名稱                              說明
slick.columnpicker                           右鍵列選擇器
slick.filter                              過濾器方法封裝
slick.filterdialog                           過濾器對話框
slick.pager                               客戶端分頁
slick.pagersvr                               服務端分頁

 

3.2 擴展控件使用

1）列右鍵選擇器columnpicker

 

//列標題控件，排序及過濾
var columnpicker = new Slick.Controls.ColumnPicker(columnsProduct, gridProduct, dataViewProduct,optionsProduct);
columnpicker.onDataColumnSort.subscribe(onDataColumnPickerSortEvent);

 

 

 

2）分頁控件pager

 

var rmtPageInfo = {};
rmtPageInfo.pageNum = 0;
rmtPageInfo.pageSize = 100;
rmtPageInfo.totalRowsCount =10000;      //先默認，后服務端計算返回
rmtPageInfo.totalPagesCount = 20;        //先默認，后服務端計算返回

//注冊分頁控件
var pager = newSlick.Controls.PagerSvr(dataViewProduct, gridProduct, rmtPageInfo, $("#myPagerProduct"));
pager.onDataPaged.subscribe(onDataPagedEvent);

3）過濾器filter

 

//打開過濾器彈出框
var filterDialog = window.open('../scripts/slickgrid/controls/slick.filterdialog.html?colDefName=colDefEPProduct', 'myfilterdialog','height=500,width=600,left=150,top=100');

 

 

 

4. 總結：

Web開發人員在熟知SlickGrid的基礎架構和功能后，可以利用插件技術靈活實現自有業務需求的功能；此外，SlickGrid的各種特性在Melibman的主版本中持續開發完善，相信國內的開發人員也會逐漸了解SlickGrid，本文中提到的新插件都是為實際項目需求進行開發實現的，個別基礎功能的插件在測試后，會在分支版本中發布出來。