一、列拖动
项目有个需求，要实现easyui的datagrid的列拖动，比如客户要把关注的数据列拖到最前面去。
首先定义列集合
let cols=[
{ field: 'wfta_id', title: '主id', hidden: true},
{
field: 'appm_type', title: '单据类型', halign: 'center', width: 80, sortable: true, align: 'center',
formatter: function (value, row, index) { return row.appm_type_name }
},
{
field: 'dept_no', title: '部门编码', halign: 'center', width: 80, sortable: true, align: 'center',
formatter: function (value, row, index) { return row.dept_no_name }
},
{
field: 'wftm_id', title: '审批模板', halign: 'center', width: 80, sortable: true, align: 'center',
formatter: function (value, row, index) { return row.wftm_id_name }
},
{ field: 'creator', title: '创建人', halign: 'center', width: 80, sortable: true },
{ field: 'create_time', title: '创建时间', halign: 'center', width: 80, sortable: true },
{
field: 'isenable', title: '是否有效', halign:'center', width: 30,sortable:true,align:'center',
formatter: function (value) {return formatterEnable(value, "是", "否")}
}
];鼠标拖拽列头到另一个列头实现两列位置互换，然后把列信息保存到浏览器缓存中，代码如下：
function drag() {
$('.datagrid-header-inner .datagrid-cell').draggable({
revert: true,
proxy: 'clone'
}).droppable({
accept: '.datagrid-header-inner .datagrid-cell',
onDrop: function (e, source) {
let src = $(source.innerHTML).html(); //源标题
let target = $(e.currentTarget.innerHTML).html(); //目标标题
let newCols=[];
cols.forEach(x => {
if(x.title==src) { //源使用目标列
var target_col=cols.find(a=>a.title==target);
if(target_col) newCols.push(target_col);
} else if(x.title==target){ //目标使用源列
var src_col=cols.find(a=>a.title==src);
if(src_col) newCols.push(src_col);
} else {
newCols.push(x);
}
});
cols=newCols; //重新赋值
Singoo.SetCache("cols",JSON.stringify(cols));
initGrid();
}
});
}初始化datagrid
function initGrid(){
$('#List').datagrid({
//...
onLoadSuccess: function(data) {
drag();
},
columns: [loadGridCols()]
//...
});
}上面的网格的列加载，如果缓存中有数据就从缓存读，否则读默认的列集合
function loadGridCols(){ //加载网格列
let colsFromCache=Singoo.GetCache("cols");
if(colsFromCache && colsFromCache!="") {
let cacheCols=JSON.parse(colsFromCache);
//保存到cache时，会清除内嵌的function,因此cols没有formatter，这里要加上
cacheCols.forEach(x => {
if(x.field=="appm_type") x.formatter=function (value, row, index) { return row.appm_type_name };
else if(x.field=="dept_no") x.formatter=function (value, row, index) { return row.dept_no_name };
else if(x.field=="wftm_id") x.formatter=function (value, row, index) { return row.wftm_id_name };
else if(x.field=="isenable") x.formatter=function (value) {return formatterEnable(value, "是", "否")};
});
return cacheCols;
}
return cols; //没有缓存的网格列，那么使用默认的列
}
二、列隐藏
同时客户又有个需求，想要把不怎么关注的列隐藏了，毕竟每个用户的关注点不同。
首先定义个弹出窗，用来显示列信息
<div id="title_win" style="display:none" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false">
<div class="mycontent">
<div class="mypanel">
<table>
<tr>
<td>
<div id="cols_set" class="easyui-datalist" title="勾选（显示）/不勾选（隐藏）"
style="width:410px;height:320px" data-options="
checkbox: true,
textField: 'title',
valueField: 'field',
singleSelect: false
">
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">
<div style="margin-top:10px;">
<a id="btnSaveColStatus" class="btn btn-success"><span class="fa fa-save"></span> 保存</a>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
在初始化datagrid时，设置一个工具栏
function initGrid(){
$('#List').datagrid({
//...
columns: [loadGridCols()],
toolbar:[{
text:'列显示设置',iconCls:'icon-add',handler:function(){
showColSet();
}
}]
});
}当点“列显示设置”时弹出窗体，注意datalist设置选中的方法是$("#cols_set").datalist("checkRow",i);i是下标。
function showColSet(){
let colSet=[],cacheCols=[];
let colsFromCache=Singoo.GetCache("cols");
if(colsFromCache && colsFromCache!="") {
cacheCols=JSON.parse(colsFromCache);
}else{
cacheCols=cols;
}
cacheCols.forEach(x => {
if(!originalHiddenCols.some(p=>p.field==x.field))
colSet.push({"field":x.field,"title":x.title,isHidden:x.hidden}); //排除默认的隐藏列，比如ID啥的
});
$("#cols_set").datalist("loadData",colSet);
for(let i=0;i<colSet.length;i ){
if(!colSet[i].isHidden)
$("#cols_set").datalist("checkRow",i); //设置选中状态
}
$("#title_win").window({ title: '列显/隐设置', width: 450, height: 450 }).window('open');
$('#title_win').window('center', 'center');
}把不需要显示的列去掉勾选，保存即生效，注意datalist取选中数据的方法和datagrid是一样的
function saveColStatus(){
let chkRows=$("#cols_set").datalist("getSelections"); //选中列
cols.forEach(x => {
if(!chkRows.some(p=>p.field==x.field)){
x.hidden=true; //隐藏
}else{
x.hidden=false; //显示
}
});
Singoo.SetCache("cols",JSON.stringify(cols));
initGrid();
$("#title_win").window('close');
}