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"
"+ value +"
";
     }
     else
        returnvalue;
 }


 //或者 加
 //formatter:colFormatter
 //字体描色
 functioncolFormatter(row, cell, value, columnDef, dataContext) {
     if(dataContext.iscol == true&& value!="") {
         return"
"+ value +"
";
     }
     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('My option');
		//$(".editor-select").append('My 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前端框架）