转自 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"<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,本文中提到的新插件都是为实际项目需求进行开发实现的,个别基础功能的插件在测试后,会在分支版本中发布出来。