主要实现功能：
1、在不调整现有代码的基础上给 datagrid 添加可以编辑的功能
2、 通过拖拽实现顺序/隐藏等操作
3、可以为每个用户定制一个特定顺序的列 达到定制化的目的
效果图如下：
具体实现代码：
(function(){
var curItem=null;
var myDataGird = new Array();
var originalDataGird = new Array();
var that = null;
$.ColumnShow = function () {
that =this;
this.settings = $.extend(true, {}, $.ColumnShow.defaults);
this.init();
};
$.extend($.ColumnShow, {
defaults: {
},
prototype : {
init: function () {
$.fn.datagrid.defaults.onHeaderContextMenu = that.createGridHeaderContextMenu;
$.fn.datagrid.defaults.onBeforeLoad = that.createOnBeforeLoad;
$.fn.treegrid.defaults.onHeaderContextMenu = that.createGridHeaderContextMenu;
$.fn.treegrid.defaults.onBeforeLoad = that.createOnBeforeLoad;
},
beforeOrAfter:function(obj1,obj2){
/*
* 判断obj1（的中点是在obj2之前还是之后。用于决定curItem应该插在activeItem之前还是之后
*/
var center = {
y : obj1.offsetTop + (obj1.offsetHeight)/2
};
if(center.y < (obj2.offsetTop + (obj2.offsetHeight)/2)){
return "before";
}else{
return "after";
}
},
isIn:function(obj1,obj2){
/*center是obj1中点的坐标*/
/*
* 判断obj1的中点是否在obj2内部
*/
var center = {
x : obj1.offsetLeft + (obj1.offsetWidth)/2,
y : obj1.offsetTop + (obj1.offsetHeight)/2
};
if(center.x > obj2.offsetLeft &&
center.y > obj2.offsetTop &&
center.x < (obj2.offsetLeft+obj2.offsetWidth) &&
center.y < (obj2.offsetTop + obj2.offsetHeight)){
return true;
}else{
return false;
}
},
/*
* 返回下一个兄弟“元素”节点（跳过文本节点），为了应付非ie浏览器将换行符视为文本节点的想象。
*/
nextElement :function(node){
for(var nextNode = node.nextSibling;nextNode;nextNode = nextNode.nextSibling){
if(nextNode.nodeType == 1){
return nextNode;
}
}
return null;
},
/*
* 返回上一个兄弟“元素”节点（跳过文本节点），为了应付非ie浏览器将换行符视为文本节点的想象。
*/
previousElement:function (node){
for(var previousNode = node.previousSibling;previousNode;previousNode = previousNode.previousSibling){
if(previousNode.nodeType == 1){
return previousNode;
}
}
return null;
},
/**
* 扩展datagrid、treegrid，增加表头右键菜单功能。右键单击grid的表头，会显示所有列，可动态对列进行显示和隐藏
* 注意：冻结列不在此菜单中
*/
closeDIV:function (){
// 关闭 列编辑的窗口
$("#dragContainer").window({closed:true});
},
formatFormName : function (tableName) {
// 跟据tableName 获取 dataGrid 名称
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var url = isIE ? window.document.URL : window.document.baseURI;
var host = window.location.host;
url =url.split("?")[0];
return url.replace(window.location.protocol+"//"+host,"")+"#"+tableName ;
},
createGridHeaderContextMenu :function(e, field) {
e.preventDefault();
var grid = $(this);/* 得到gird对象*/
var columsOriginal=originalDataGird[that.formatFormName(this.id)];
var headerContextMenu = this.headerContextMenu;/* 得到grid的列头菜单对象 */
var id=null;
if (!headerContextMenu) {
id =Math.round(Math.random()*100);
var dragContainer =$('<div id="dragContainer" width="310px"></div>').appendTo('body');
var fields = grid.datagrid('getColumnFields');
var tmenu = $('<div id="source'+id+'" class="dragManager">展示列</div>').appendTo(dragContainer);
var tmenu_1 = $('<div id="target'+id+'" class="dragManager">隐藏列</div>').appendTo(dragContainer);
var tmenu_2 = $('<a id="BTN_CANCEL" href="javascript:closeDIV();" class="BTN_CANCEL">取消编辑</a>').appendTo(dragContainer);
var dragItem;
for (var i = 0; i < fields.length; i++) {
var fildOption = grid.datagrid('getColumnOption', fields[i]);
var divHtml ='<div class="drag dragItem" field='+fildOption.field+' index='+columsOriginal[fildOption.field].index+' fieldName="'+fields[i]+'"></div>';
if (!fildOption.hidden) {
dragItem =$(divHtml).html(fildOption.title).appendTo(tmenu);
} else {
dragItem =$(divHtml).html(fildOption.title).appendTo(tmenu_1);
}
}
headerContextMenu = this.headerContextMenu =dragContainer;
this.headerContextMenu.fields =fields;
this.headerContextMenu.id =id;
}else{
id =headerContextMenu.id ;
}
$('.drag').draggable({
proxy:'clone',
revert:true,
cursor:'auto',
onStartDrag:function(){
$(this).draggable('options').cursor='not-allowed';
$(this).draggable('proxy').addClass('dp selectDP');
},
onStopDrag:function(){
$(this).draggable('options').cursor='auto';
}
});
var onDropFun =function(e,source){
var activeItem=null;
var itemCopy=source;
var target = this ;
var child=null;
/*for(var i = 0;i < target.children.length;i++){
child=target.children[i];
if(curItem != child && isIn(itemCopy,child)){
activeItem = child;
break;
}
}*/
var curItem =$('.selectDP')[0];
var indexSource=0;
for(var i = 0;i < source.parentElement.children.length;i++){
if(source.parentElement.children[i] == source){
indexSource=i;
break;
}
}
indexSource=indexSource+1;
// curItem.parent
if(curItem){
var n =Math.round((curItem.offsetTop+source.offsetTop -parseInt(source.style.top))/(source.offsetTop/indexSource));
if(n >=target.children.length){
$(this).append(source)
}else{
if(target == source.parentElement ){
if(curItem.offsetTop>parseInt(source.style.top)){
n=n+2;
}
}
target.insertBefore(source,target.children[n-1]);
}
}
$(this).removeClass('over');
}
$('#target'+id).droppable({
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
$(source).draggable('proxy').css('border','1px solid red');
$(this).addClass('over');
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1px solid #ccc');
$(this).removeClass('over');
},
onDrop:onDropFun
});
$('#source'+id).droppable({
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
$(source).draggable('proxy').css('border','1px solid red');
$(this).addClass('over');
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1px solid #ccc');
$(this).removeClass('over');
},
onDrop:onDropFun
});
var handler_customer =function(){
$.messager.progress({ title:'请稍后', msg:'正在操作' });
var target =$('#target'+id)[0];
var source =$('#source'+id)[0];
var columns = grid.datagrid('options').columns[0];
var newColums = new Array();
var attributes =null;
if(source){
// 遍历出 右边 div 左边的是要显示的列
for(var i=0;i<source.children.length;i++){
attributes =source.children[i].attributes;
newColums[i]= columsOriginal[attributes.field.value];
// hidden 属性 false
columsOriginal[attributes.field.value].hidden=false;
}
}
if(target){
for(var i=0;i<target.children.length;i++){
// 遍历出 右边 div 右边的是要隐藏的列
attributes =target.children[i].attributes;
newColums[i+source.children.length]= columsOriginal[attributes.field.value];
// hidden 属性 true
columsOriginal[attributes.field.value].hidden=true;
}
}
grid.datagrid('options').columns[0] =newColums;
// 把列 对象转换成json string
var columsStr=JSON.stringify(newColums);
// 缓存到浏览器中
localStorage.setItem(that.formatFormName(grid[0].id),columsStr);
var urlstr =webRoot+'/GridControl/SaveGridLayout.do';
var param1 = {
formName: that.formatFormName(grid[0].id),
columus: columsStr
};
$.ajax({
type:'post',
url:urlstr,
async:false,
data:param1,
success: function(data){
if(data && data=="成功"){
// 需求初始化的flag false 需要初始化 true 是已经进行了初始化
myDataGird[that.formatFormName(id)]=false;
// 刷新列表
grid.datagrid();
$.messager.alert('提示','成功','info');
}else{
$.messager.alert('提示','失败','info');
}
}
});
$.messager.progress('close');
}
headerContextMenu.window({
title:"编辑列：" ,
width:600,
height:500,
tools: [ {
text:"保存结果",
iconCls:'icon-save',
handler:handler_customer
}],
modal:true,
onBeforeClose: function () {
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
}
})
},
createOnBeforeLoad : function(e, field, id) {
var tableId;
var grid;
if(!id){
tableId= this.id;
grid=$(this);
}else{
tableId =id;
grid=$('#'+tableId);
}
var initFlag= myDataGird[that.formatFormName(tableId)];
if(initFlag){
return;
}
myDataGird[that.formatFormName(tableId)]=true;
var sourceColums =grid.datagrid('options').columns[0];
if(sourceColums){
var myDataGirdTemp= new Array()
for (var i = 0; i < sourceColums.length; i++) {
sourceColums[i].index =i;
myDataGirdTemp[sourceColums[i].field] =sourceColums[i];
}
originalDataGird[that.formatFormName(tableId)] =myDataGirdTemp ;
}
// 在浏览器中取出缓存
var newColums = JSON.parse(localStorage.getItem(that.formatFormName( tableId)));
if(!newColums){
// 浏览器中没有缓存的从服务器端取数据
// 同步取 async:false
var param1 = {
formName: that.formatFormName( tableId)
};
$.ajax({
type:'post',
url:webRoot+'/GridControl/GetGridLayout',
data:param1,
async:false,
success: function(data){
if(data && data != "[]"){
newColums =getDataCommon(data);
}
}
});
}
if(newColums){
// 新coloum
var newColumsTemp = new Array();
// 新添加的 colums
var addColumsTemp = new Array();
var columsOriginal=originalDataGird[that.formatFormName(tableId)];
// 根据 field 属性创建一个新数组
for (var i = 0; i < newColums.length; i++) {
if(!columsOriginal[newColums[i].field]){
// 剔除已经删除的列
return;
}
// 根据 field 构建新的数组
newColumsTemp[newColums[i].field]=newColums[i];
}
var j =0;
// 遍历 代码中给出的数组 判断是否有新加的字段
for(var temp in columsOriginal){
if(!newColumsTemp[columsOriginal[temp].field]){
// 把新添加的字段放到 add 数组中去
addColumsTemp[j]=columsOriginal[temp];
j++;
}
}
j=0;
// 获取到的服务器上保存的
for (var i = 0; i < newColums.length; i++) {
// 列表中已经不存在的列 被开发删除了 在此剔除
if(!columsOriginal[newColums[i].field]){
return;
}
// 把隐藏的属性赋值到 原始列属性上
columsOriginal[newColums[i].field].hidden =newColums[i].hidden;
// 把原始列的属性信息复制到新列的属性上保证样式及各种绑定关系
newColums[j]=columsOriginal[newColums[i].field];
j++;
}
// 增加的新列 添加到最后
var length =newColums.length;
for (var i = 0; i < addColumsTemp.length; i++) {
newColums[i+length]=addColumsTemp[i];
}
// 替换原来的 columns
grid.datagrid('options').columns[0] =newColums;
// 开始刷新 data grid
grid.datagrid();
}
}
}
})
})(jQuery);
// 构造创建出 一个实例
var columnShow = new $.ColumnShow();
1558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
