SlickGrid 插件开发(3)：Dropdownlist 下拉框控件开发
前言：用户在Grid里面的操作是一种富客户端的应用，下拉框编辑功能必不可少，目前已经整理出单元格嵌入方式的下拉框，只读下拉框列和可编辑的下拉框插件。在此把大致的开发过程总以总结说明，以飨读者。
1.DropdownListEditor--嵌入单元格
1).绑定外部数据源和Changed事件
[javascript]viewplaincopy
vardataSouce=args.grid.$selDropdownlistDatasource;
varchangedEvent=args.grid.$selDropdownlistChangedEvent;
2).初始化方法
[javascript]viewplaincopy
$select=this.preRender(args.grid.$selDropdownlistDatasource);
if(changedEvent!=null)
$select.change(function(){
changedEvent(this,{"ID":$select.val(),"txt":$select.find('option:selected').text()});
});
$select.appendTo(args.container);
预添加控件：
[javascript]viewplaincopy
this.preRender=function(dataSource){
varoption_str="";
varpreSelect="<SELECTtabIndex='0'class='editor-select'><OPTIONvalue='-1'></OPTION>";
varendSelect="</SELECT>";
varlen=dataSource.length;
if(len>0&&dataSource[0].txt!=undefined){
for(vari=0;i<len;i++)
option_str+="<OPTIONvalue='"+dataSource[i].ID+"'>"+dataSource[i].txt+"</OPTION>";
}
else{
for(vari=0;i<len;i++)
option_str+="<OPTIONvalue='"+dataSource[i].ID+"'>"+dataSource[i].Text+"</OPTION>";
}
varlist=preSelect+option_str+endSelect;
return$(list);
}
3).序列化方法
[javascript]viewplaincopy
this.serializeValue=function(){
if($select.val()!=-1){
return$select.find('option:selected').text();
}
};
4).插件完整代码
[javascript]viewplaincopy
functionDropDownList(args){
var$select=$("");
vardefaultValue="";
varscope=this;
vardataSouce=args.grid.$selDropdownlistDatasource;
varchangedEvent=args.grid.$selDropdownlistChangedEvent;
this.init=function(){
if(dataSouce!=undefined&&dataSouce!=null){
$select=this.preRender(args.grid.$selDropdownlistDatasource);
if(changedEvent!=null)
$select.change(function(){
changedEvent(this,{"ID":$select.val(),"txt":$select.find('option:selected').text()});
});
$select.appendTo(args.container);
$select.focus();
}
};
this.preRender=function(dataSource){
varoption_str="";
varpreSelect="<SELECTtabIndex='0'class='editor-select'><OPTIONvalue='-1'></OPTION>";
varendSelect="</SELECT>";
varlen=dataSource.length;
if(len>0&&dataSource[0].txt!=undefined){
for(vari=0;i<len;i++)
option_str+="<OPTIONvalue='"+dataSource[i].ID+"'>"+dataSource[i].txt+"</OPTION>";
}
else{
for(vari=0;i<len;i++)
option_str+="<OPTIONvalue='"+dataSource[i].ID+"'>"+dataSource[i].Text+"</OPTION>";
}
varlist=preSelect+option_str+endSelect;
return$(list);
}
this.destroy=function(){
$(args.container).empty();
};
this.focus=function(){
$select.focus();
};
this.serializeValue=function(){
if($select.val()!=-1){
return$select.find('option:selected').text();
}
};
this.applyValue=function(item,state){
if(state!=undefined){
item[args.column.field]=state;
}
};
this.loadValue=function(item){
defaultValue=item[args.column.field];
};
this.isValueChanged=function(){
return($select.val()!=defaultValue);
};
this.validate=function(){
return{
valid:true,
msg:null
};
};
this.init();
return$select.val();
}
5).前端调用示例
a).首先列定义如下：
[javascript]viewplaincopy
{id:"MadeInFrom",name:"产地",field:"MadeInFrom",fieldType:"int",hasFilter:true,editor:Slick.Editors.DropDownList},
b).绑定数据源和Change事件示例：
[javascript]viewplaincopy
//添加行绑定下拉框数据源
varmadeInType=[{"ID":1,"txt":"China"},
{"ID":2,"txt":"USA"},
{"ID":3,"txt":"Taiwan"},
{"ID":4,"txt":"UK"}];
[javascript]viewplaincopy
functiononSelectChanged(e,args){
window.console.log("fireevent...");
}
gridProduct.$selDropdownlistDatasource=madeInType;
gridProduct.$selDropdownlistChangedEvent=onSelectChanged;
c).页面效果
2.DropdownListColumn--下拉框列
1).定义命名空间
[javascript]viewplaincopy
$.extend(true,window,{
"Slick":{
"CheckboxSelectColumn":CheckboxSelectColumn,
"DropDownListColumn":DropDownListColumn
}
});
2).插件完整代码
[javascript]viewplaincopy
//#region下拉框列
functionDropDownListColumn(options){
var_grid;
var_self=this;
var_handler=newSlick.EventHandler();
var_selectedRowsLoop={};
var_default={
columnId:options.id,
width:60
};
var_options=$.extend(true,{},_default,options);
functioninit(grid){
_grid=grid;
}
functiondestroy(){
_handler.unsubscribeAll();
}
functiongetColumnDefinition(){
return{
id:_options.columnId,
name:_options.name,
field:_options.field,
fieldType:_options.fieldType,
hasFilter:_options.hasFilter,
dataSource:_options.dataSource,
width:_options.width,
resizable:false,
sortable:false,
formatter:dropdownlistFormatter
};
}
functiondropdownlistFormatter(row,cell,value,columnDef,dataContext){
if(dataContext){
vardataSource=_options.dataSource;
varoption_str="";
varpreSelect="<SELECTtabIndex='0'id='slt_"+columnDef.field+"'class='editor-select'><OPTIONvalue='-1'></OPTION>";
varendSelect="</SELECT>";
for(vari=0,len=dataSource.length;i<len;i++){
if(dataContext[columnDef.field]==dataSource[i].ID){
option_str+="<OPTIONvalue='"+dataSource[i].ID+"'selected='true'>"+dataSource[i].Text+"</OPTION>";
}
else{
option_str+="<OPTIONvalue='"+dataSource[i].ID+"'>"+dataSource[i].Text+"</OPTION>";
}
}
varlist=preSelect+option_str+endSelect;
returnlist;
}
}
$.extend(this,{
"init":init,
"destroy":destroy,
"getColumnDefinition":getColumnDefinition
});
}
3).前端调用示例
a).定义数据源
[javascript]viewplaincopy
//添加整列固定下拉框数据源
varproductTypeJson=[{"ID":3,"Text":"PT-Three"},
{"ID":4,"Text":"PT-Four"},
{"ID":5,"Text":"PT-Five"},
{"ID":6,"Text":"PT-Six"}];
b).下拉框列定义
[javascript]viewplaincopy
vardropdownProductType=newSlick.DropDownListColumn({
id:"ProductType",name:"产品类型",field:"ProductType",fieldType:"dropdownlist",
hasFilter:true,width:120,dataSource:productTypeJson
});
columnsProduct.splice(3,0,dropdownProductType.getColumnDefinition());
b).注册下拉框
[javascript]viewplaincopy
//注册下拉框
gridProduct.registerPlugin(dropdownProductType);
c).页面效果
3.总结：
插件开发是扩充SlickGrid功能的一种方式，主要步骤可以描述为：数据结构定义，初始化控件，控件事件交互和编辑框数值读取处理。此处做以Demo示例，供大家参考。