时间戳

首页 > 技术文章 > slickgrid插件

slickgrid插件

mjdai 2016-05-10 22:41 原文

来自 besley
 

前言：在前篇文章中，总结了SlickGrid 的基本方法，SlickGrid其功能扩展主要靠插件技术；这也是体现出作者Melibman 架构设计的优秀之处。本文列出了Master版本提供的插件以外，另外特意列出了在项目中添加的新的插件，供SlickGrid的开发人员参考(目前会在分支版本中提供，并未合并到SlickGrid的主版本中去)。

 

1. 基本插件列表

 

 

[html] view plain copy
 
  1. 插件名称                               说明  
  2. //列单元格嵌入编辑器  
  3. TextEditor                             文本框编辑器,  
  4. IntegerEditor                          数字编辑器  
  5. DateEditor                             日期编辑器,  
  6. DropDownEditor                           下拉框编辑器,  
  7. YesNoSelectEditor                      YesNo选择器  
  8. CheckboxEditor                           复选框编辑器  
  9. TextButtonEditor                       文本框按钮编辑器,  
  10. PercentCompleteEditor                    完成百分比编辑器  
  11. LongTextEditor                           长文本编辑器  
  12. SelectCellEditor                       单元格选中编辑器  
  13.    
  14. //扩充插件  
  15. slick.autotooltips                        自动提示插件  
  16. slick.cellcopymanager                     单元格复制管理器  
  17. slick.cellrangedecorator               范围内单元格装饰  
  18. slick.cellrangeselector                范围单元格选择器  
  19. slick.cellselectionmodel               单元格选定模型  
  20. slick.checkboxselectcolumn             复选框列格式插件  
  21. slick.dropdownlistcolumn               下拉框格式插件  
  22. slick.headerbuttons                    标题下拉按钮  
  23. slick.rowmovemanager                   行移动管理器  
  24. slick.rowselectionmodel                行选择模型  

 

2.   插件注册及使用

2.1  单元格嵌入编辑器

 

[javascript] view plain copy
 
  1. //在初始化列字段时候定义  
  2. var columnsProduct = [  
  3.  { id: "id", name: "产品编号", field:"ID"},  
  4.  { id: "ProductName", name:"产品名称", field:"ProductName"，editor:Slick.Editors.TextButton },  
  5.  { id: "UnitPrice", name:"单价", field:"UnitPrice"，editor: Slick.Editors.Text },  
  6. { id: "IsLuxury", name:"奢侈品?", field:"IsLuxury"，editor:Slick.Editors.Checkbox, formatter:Slick.Formatters.Checkmark },  
  7.  { id: "ModifiedDate", name:"修改日期", field:"ModifiedDate", fieldType: "datetime", editor: Slick.Editors.Date },  
  8.  { id: "Notes", name:"备注", field:"Notes", editor: Slick.Editors.LongText}  
  9. ];  

2.2 添加div等控件 Editors、formatter

 

[javascript] view plain copy
 
  1. //columns中加editor: Slick.Editors.Text 或者 加formatter:colFormatter  
  2.   
  3. //字体描色  
  4. functioncolFormatter(row, cell, value, columnDef, dataContext) {  
  5.     if(dataContext.iscol == true&& value!="") {  
  6.         return"<div style='color:red; font-weight:bold;'>"+ value +"</div>";  
  7.     }  
  8.     else  
  9.        returnvalue;  
  10. }  
  11.   
  12.   
  13. //或者 加  
  14. //formatter:colFormatter  
  15. //字体描色  
  16. functioncolFormatter(row, cell, value, columnDef, dataContext) {  
  17.     if(dataContext.iscol == true&& value!="") {  
  18.         return"<div style='color:red; font-weight:bold;'>"+ value +"</div>";  
  19.     }  
  20.     else  
  21.         returnvalue;  
  22. }  

2.3  grid注册下拉框控件dropdownlist

 

[javascript] view plain copy
 
  1. varmtrPartJson = [];  
  2. varmtrPart;  
  3. //部位下拉框  
  4. functionaddMtrPartList() {  
  5.     ajaxGet('/WebFramework/Sampric/BindMtrPart/','',function(result) {  
  6.      if(result != null) {  
  7.         mtrPartJson = result;  
  8.       mtrPart = newSlick.DropDownListColumn({  
  9.             id: "part",name: "部位", field:"part",width: 82, dataSource: mtrPartJson  
  10.         });  
  11.         bomColumns.splice(4, 1,mtrPart.getColumnDefinition());  
  12.         }  
  13.     });  
  14. }  
  15.   
  16. //注册部位下拉框  
  17. gridBom.registerPlugin(mtrPart);  
  18.   
  19. //界面元素渲染后，绑定事件  
  20. $("#slt_part").bind("change",onItemChanged);  
  21.   
  22. //部位下拉框改变Item、维护页弹出  
  23. varonItemChanged =function (e, args) {  
  24.     if ($(this).val()=="-1") {  
  25.         alert("弹出窗口，添加新选项...");  
  26.         $("#slt_part").append('<option value=10>My option</option>');  
  27.         //$(".editor-select").append('<optionvalue=10>My option</option>');  
  28.     }  
  29.     else {  
  30.         var item = gridViewBom.getItemByIdx(selectedRowIndex);  
  31.         item.part = $(this).val();  
  32.         gridViewBom.updateItem(item.ID, item);  
  33.         gridBom.updateRow(selectedRowIndex);  
  34.     }  
  35. };  


2.4  注册复选框列

 

[javascript] view plain copy
 
  1.  //添加复选框列  
  2.  var checkboxProduct = new Slick.CheckboxSelectColumn({  
  3.      cssClass: "slick-cell-checkboxsel"  
  4.  });  
  5.  columnsProduct.splice(0, 0,checkboxProduct.getColumnDefinition());  
  6.   
  7.  //注册复选框  
  8. gridProduct.registerPlugin(checkboxProduct);  

 

2.5 注册标题下拉框

 

[javascript] view plain copy
 
  1. //注册HeaderMenu  
  2. var headerMenuPlugin = new Slick.Plugins.HeaderMenu({ "dataview": dataViewProduct });  
  3.   
  4. gridProduct.registerPlugin(headerMenuPlugin);  


 

3. 扩展控件

3.1 扩展控件列表

 

[html] view plain copy
 
  1.     控件名称                              说明  
  2. slick.columnpicker                           右键列选择器  
  3. slick.filter                              过滤器方法封装  
  4. slick.filterdialog                           过滤器对话框  
  5. slick.pager                               客户端分页  
  6. slick.pagersvr                               服务端分页  

 

3.2 扩展控件使用

1）列右键选择器columnpicker

 

[javascript] view plain copy
 
  1. //列标题控件，排序及过滤  
  2. var columnpicker = new Slick.Controls.ColumnPicker(columnsProduct, gridProduct, dataViewProduct,optionsProduct);  
  3. columnpicker.onDataColumnSort.subscribe(onDataColumnPickerSortEvent);  


 

 

 

2）分页控件pager

 

[javascript] view plain copy
 
  1. var rmtPageInfo = {};  
  2. rmtPageInfo.pageNum = 0;  
  3. rmtPageInfo.pageSize = 100;  
  4. rmtPageInfo.totalRowsCount =10000;      //先默认，后服务端计算返回  
  5. rmtPageInfo.totalPagesCount = 20;        //先默认，后服务端计算返回  
  6.   
  7. //注册分页控件  
  8. var pager = newSlick.Controls.PagerSvr(dataViewProduct, gridProduct, rmtPageInfo, $("#myPagerProduct"));  
  9. pager.onDataPaged.subscribe(onDataPagedEvent);  

3）过滤器filter

 

[javascript] view plain copy
 
  1. //打开过滤器弹出框  
  2. 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，本文中提到的新插件都是为实际项目需求进行开发实现的，个别基础功能的插件在测试后，会在分支版本中发布出来。

 

推荐阅读