SlickGrid 插件开发(1)：插件功能总结 转载

SlickGrid 插件开发(1)：插件功能总结

转自 http://blog.csdn.net/besley/article/details/8914235

前言：在前篇文章中，总结了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，本文中提到的新插件都是为实际项目需求进行开发实现的，个别基础功能的插件在测试后，会在分支版本中发布出来。