SlickGrid 插件開發(1)：插件功能總結

前言：在前篇文章中，總結了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，本文中提到的新插件都是爲實際項目需求進行開發實現的，個別基礎功能的插件在測試後，會在分支版本中發佈出來。

QQ 交流羣：151650479（SlickUI企業級Web前端框架）