yui datagrid 模拟excel列头数据过滤
HTML:
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>datagrid模拟excel列头数据过滤</title>
<linkid="others_jquery_easyui_131"rel="stylesheet"type="text/css"class="library"href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
<scriptid="jquery_183"type="text/javascript"class="library"src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<scriptid="others_jquery_easyui_131"type="text/javascript"class="library"src="/js/sandbox/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>datagrid模拟excel列头数据过滤</h2>
<tableid="tt"></table>
</body>
</html>
JS:
$(function(){
$('#tt').datagrid({
url:'/uploads/rs/233/bkf2ntm7/datagrid_data2.json',
title:'datagrid模拟excel列头数据过滤',
width:600,
height:300,
fitColumns:true,
nowrap:false,
columns:[[{
field:'itemid',
title:'ItemID',
width:80
},
{
field:'productid',
title:'ProductID',
width:120
},
{
field:'listprice',
title:'ListPrice',
width:80,
align:'right'
},
{
field:'unitcost',
title:'UnitCost',
width:80,
align:'right'
},
{
field:'attr1',
title:'Attribute',
width:250
},
{
field:'status',
title:'Status',
width:60,
align:'center'
}]],
onHeaderContextMenu:function(e,field){
e.preventDefault();
//获取or设置原始rows
varrows=$(this).data("baseRows");
if(!rows){
rows=$(this).datagrid("getRows");
$(this).data("baseRows",rows);
}
varvlaues={},
currentVlaues={};
//获取当前右击列所在数据，组装成一个已列值为键的对象。
$.each(rows,
function(i,v){
vlaues[v[field]]=true;
});
//创建右键列菜单
if(!$('#tmenu_'+field).length){
createColumnMenu(field,vlaues);
}
//获取当前过滤之后该列存在的数据
varcurrentRows=$(this).datagrid("getRows");
$.each(currentRows,
function(i,v){
currentVlaues[v[field]]=true;
});
varm=$('#tmenu_'+field);
//判断已有列菜单中是否存在已经过滤的数据
$.each(vlaues,
function(k,v){
varitem=m.menu('findItem',k);
if(!currentVlaues[k]){//不存在就设置当前的icon为未选中状态
m.menu('setIcon',{
target:item.target,
iconCls:'tree-checkbox0'
});
m.data("distic")[k]=true;//在当前列的过滤记录中记录当前已经过滤的数据名称
}elseif(m.data("distic")[k]){//存在就设置当前的icon为选中状态
m.menu('setIcon',{
target:item.target,
iconCls:'tree-checkbox1'
});
deletem.data("distic")[k];//在当前列的过滤记录中删除当前已经过滤的数据名称
}
});
varicon='tree-checkbox1';
if(haveProp(m.data("distic"))){//判断当前列是否全部选中
icon='tree-checkbox0';
}
varitem=m.menu('findItem',"全选");
m.menu('setIcon',{
target:item.target,
iconCls:icon
});
//显示列选择数据菜单
m.menu('show',{
left:e.pageX,
top:e.pageY
});
}
});
});
/**
*创建列数据菜单
*@paramfield当前列
*@paramvlaues当期列组成的以数据为键的对象
**/
functioncreateColumnMenu(field,vlaues){
vartmenu=$('<divid="tmenu_'+field+'"class="_tmenu"style="width:100px;"></div>').appendTo('body');
$('<diviconCls="tree-checkbox1"/>').html("全选").appendTo(tmenu);
$('<divclass="menu-sep"/>').appendTo(tmenu);
$.each(vlaues,
function(key,value){
$('<diviconCls="tree-checkbox1"/>').html(key).appendTo(tmenu);
});
tmenu.data("distic",{});//初始化，已过滤数据存储对象
//实例化数据列选择菜单
tmenu.menu({
onClick:function(item){
if(item.text=="全选"&&item.iconCls=='tree-checkbox0'){
$.each(tmenu.data("distic"),
function(k,v){
vardisticItem=tmenu.menu('findItem',k);
tmenu.menu('setIcon',{
target:disticItem.target,
iconCls:'tree-checkbox1'
});
});
tmenu.data("distic",{});
tmenu.menu('setIcon',{
target:item.target,
iconCls:'tree-checkbox1'
});
dataFilter(field);
}elseif(item.text!="全选"&&item.iconCls=='tree-checkbox1'){
tmenu.data("distic")[item.text]=true;
tmenu.menu('setIcon',{
target:item.target,
iconCls:'tree-checkbox0'
});
dataFilter(field);
}elseif(item.text!="全选"){
deletetmenu.data("distic")[item.text];
tmenu.menu('setIcon',{
target:item.target,
iconCls:'tree-checkbox1'
});
dataFilter(field);
}
}
});
}
/**
*从原始rows中过滤数据
*@paramfield当前列
**/
functiondataFilter(field){
varnewRows=$('#tt').data("baseRows");
vartemp=[];
vardisticValue=$('#tmenu_'+field).data('distic');
if(haveProp(disticValue)){
$.each(newRows,
function(k,v){
if(!disticValue[v[field]]){
temp.push(v);
}
});
}
$('#tt').datagrid("loadData",temp);
}
/**
*判断json对象中是否存在元素
*@paramobjjson对象
**/
functionhaveProp(obj){
varhaving=false;
if(!obj)returnhaving;
$.each(obj,
function(){
having=true;
return;
});
returnhaving;
}
CSS:
body{
background:#fff;
}