前言：在前篇文章中，总结了SlickGrid 的基本方法，SlickGrid其功能扩展主要靠插件技术；这也是体现出作者Melibman 架构设计的优秀之处。本文列出了Master版本提供的插件以外，另外特意列出了在项目中添加的新的插件，供SlickGrid的开发人员参考(目前会在分支版本中提供，并未合并到SlickGrid的主版本中去)。
1. 基本插件列表
插件名称说明//列单元格嵌入编辑器TextEditor文本框编辑器,IntegerEditor数字编辑器DateEditor日期编辑器,DropDownEditor下拉框编辑器,YesNoSelectEditorYesNo选择器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>";}elsereturnvalue; } //或者 加 //formatter:colFormatter //字体描色 functioncolFormatter(row, cell, value, columnDef, dataContext) {if(dataContext.iscol == true&& value!="") {return"<div style='color:red; font-weight:bold;'>"+ value +"</div>";}elsereturnvalue; }
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 注册标题下拉框
//注册HeaderMenuvar 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);
观今宜鉴古，无古不成今。
