«
tableAuto.js设置easyui表格列按下拉列表勾选状态动态现象
杰 发布于
阅读:189
HTML
/**
*
*/
function tableAuto(a,b){
var obj = GetFrozeData('#'+b,'');
initComboboxTableFiled(a,obj,b)
}
var GetFrozeData = function (gridStr, isFroze) {
//获取所有未冻结列数据
var cols = $(gridStr).datagrid('getColumnFields', isFroze);
var array = [];
for (var i =0;i< cols.length;i++) {
//获取每一列的列名对象
var col = $(gridStr).datagrid("getColumnOption", cols[i]);
//声明对象
var obj = new Object();
obj["value"] = cols[i];
obj["text"] = col.title.trim();
if(col.hidden==true){
obj["select"]=false;
}else{
obj["select"]=true;
}
//追加对象
array.push(obj);
}
return array;
}
function initComboboxTableFiled(id,obj,tableid){
var ckstr = [];
for(var i =0;i<obj.length;i++){
if(obj[i].select){
ckstr.push(obj[i].value);
}
}
var thisvalue = ckstr.join(",");
$('#'+id).combobox({
data:obj,
method:'post',
panelHeight:400,//设置为固定高度,combobox出现竖直滚动条
valueField:'value',
textField:'text',
value:thisvalue,
multiple:true,
formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
var opts = $(this).combobox('options');
var str = '';
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onLoadSuccess: function () { //下拉框数据加载成功调用
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');//获取选中的值的values
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
});
},
onSelect: function (row) { //选中一个选项时调用
var opts = $(this).combobox('options');
//获取选中的值的values
$("#"+id).val($(this).combobox('getValues'));
//设置选中值所对应的复选框为选中状态
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', true);
$('#'+tableid).datagrid('showColumn',row.value);//showColumn,hideColumn
},
onUnselect: function (row) {//不选中一个选项时调用
var opts = $(this).combobox('options');
//获取选中的值的values
$("#"+id).val($(this).combobox('getValues'));
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', false);
$('#'+tableid).datagrid('hideColumn',row.value);//showColumn,hideColumn
}
});
};
javascript