slickgrid 中ajax,SlickGrid 插件开发(1)：插件功能总结
前言：在前篇文章中，总结了SlickGrid 的基本方法，SlickGrid其功能扩展主要靠插件技术；这也是体现出作者Melibman 架构设计的优秀之处。本文列出了Master版本提
前言：在前篇文章中，总结了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"
}
else
returnvalue;
}
//或者 加
//formatter:colFormatter
//字体描色
functioncolFormatter(row, cell, value, columnDef, dataContext) {
if(dataContext.iscol == true&& value!="") {
return"
}
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);
