yui datagrid 模拟excel列头数据过滤
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid 模拟excel列头数据过滤</title>
<link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<script id="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>
<table id="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: 'Item ID',
width: 80
},
{
field: 'productid',
title: 'Product ID',
width: 120
},
{
field: 'listprice',
title: 'List Price',
width: 80,
align: 'right'
},
{
field: 'unitcost',
title: 'Unit Cost',
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
var rows = $(this).data("baseRows");
if (!rows) {
rows = $(this).datagrid("getRows");
$(this).data("baseRows", rows);
}
var vlaues = {},
currentVlaues = {};
//获取当前右击列所在数据，组装成一个已列值为键的对象。
$.each(rows,
function(i, v) {
vlaues[v[field]] = true;
});
//创建右键列菜单
if (!$('#tmenu_' + field).length) {
createColumnMenu(field, vlaues);
}
//获取当前过滤之后该列存在的数据
var currentRows = $(this).datagrid("getRows");
$.each(currentRows,
function(i, v) {
currentVlaues[v[field]] = true;
});
var m = $('#tmenu_' + field);
//判断已有列菜单中是否存在已经过滤的数据
$.each(vlaues,
function(k, v) {
var item = m.menu('findItem', k);
if (!currentVlaues[k]) { //不存在就设置当前的icon为未选中状态
m.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox0'
});
m.data("distic")[k] = true; //在当前列的过滤记录中记录当前已经过滤的数据名称
} else if (m.data("distic")[k]) { //存在就设置当前的icon为选中状态
m.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox1'
});
delete m.data("distic")[k]; //在当前列的过滤记录中删除当前已经过滤的数据名称
}
});
var icon = 'tree-checkbox1';
if (haveProp(m.data("distic"))) { //判断当前列是否全部选中
icon = 'tree-checkbox0';
}
var item = m.menu('findItem', "全选");
m.menu('setIcon', {
target: item.target,
iconCls: icon
});
//显示列选择数据菜单
m.menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
/**
* 创建列数据菜单
* @param field 当前列
* @param vlaues 当期列组成的以数据为键的对象
**/
function createColumnMenu(field, vlaues) {
var tmenu = $('<div id="tmenu_' + field + '" class="_tmenu" style="width:100px;"></div>').appendTo('body');
$('<div iconCls="tree-checkbox1"/>').html("全选").appendTo(tmenu);
$('<div class="menu-sep"/>').appendTo(tmenu);
$.each(vlaues,
function(key, value) {
$('<div iconCls="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) {
var disticItem = 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);
} else if (item.text != "全选" && item.iconCls == 'tree-checkbox1') {
tmenu.data("distic")[item.text] = true;
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox0'
});
dataFilter(field);
} else if (item.text != "全选") {
delete tmenu.data("distic")[item.text];
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox1'
});
dataFilter(field);
}
}
});
}
/**
* 从原始rows中过滤数据
* @param field 当前列
**/
function dataFilter(field) {
var newRows = $('#tt').data("baseRows");
var temp = [];
var disticValue = $('#tmenu_' + field).data('distic');
if (haveProp(disticValue)) {
$.each(newRows,
function(k, v) {
if (!disticValue[v[field]]) {
temp.push(v);
}
});
}
$('#tt').datagrid("loadData", temp);
}
/**
* 判断json对象中是否存在元素
* @param obj json对象
**/
function haveProp(obj) {
var having = false;
if (!obj) return having;
$.each(obj,
function() {
having = true;
return;
});
return having;
}
CSS:
body{
background:#fff;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid 模拟excel列头数据过滤</title>
<link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<script id="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>
<table id="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: 'Item ID',
width: 80
},
{
field: 'productid',
title: 'Product ID',
width: 120
},
{
field: 'listprice',
title: 'List Price',
width: 80,
align: 'right'
},
{
field: 'unitcost',
title: 'Unit Cost',
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
var rows = $(this).data("baseRows");
if (!rows) {
rows = $(this).datagrid("getRows");
$(this).data("baseRows", rows);
}
var vlaues = {},
currentVlaues = {};
//获取当前右击列所在数据，组装成一个已列值为键的对象。
$.each(rows,
function(i, v) {
vlaues[v[field]] = true;
});
//创建右键列菜单
if (!$('#tmenu_' + field).length) {
createColumnMenu(field, vlaues);
}
//获取当前过滤之后该列存在的数据
var currentRows = $(this).datagrid("getRows");
$.each(currentRows,
function(i, v) {
currentVlaues[v[field]] = true;
});
var m = $('#tmenu_' + field);
//判断已有列菜单中是否存在已经过滤的数据
$.each(vlaues,
function(k, v) {
var item = m.menu('findItem', k);
if (!currentVlaues[k]) { //不存在就设置当前的icon为未选中状态
m.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox0'
});
m.data("distic")[k] = true; //在当前列的过滤记录中记录当前已经过滤的数据名称
} else if (m.data("distic")[k]) { //存在就设置当前的icon为选中状态
m.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox1'
});
delete m.data("distic")[k]; //在当前列的过滤记录中删除当前已经过滤的数据名称
}
});
var icon = 'tree-checkbox1';
if (haveProp(m.data("distic"))) { //判断当前列是否全部选中
icon = 'tree-checkbox0';
}
var item = m.menu('findItem', "全选");
m.menu('setIcon', {
target: item.target,
iconCls: icon
});
//显示列选择数据菜单
m.menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
/**
* 创建列数据菜单
* @param field 当前列
* @param vlaues 当期列组成的以数据为键的对象
**/
function createColumnMenu(field, vlaues) {
var tmenu = $('<div id="tmenu_' + field + '" class="_tmenu" style="width:100px;"></div>').appendTo('body');
$('<div iconCls="tree-checkbox1"/>').html("全选").appendTo(tmenu);
$('<div class="menu-sep"/>').appendTo(tmenu);
$.each(vlaues,
function(key, value) {
$('<div iconCls="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) {
var disticItem = 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);
} else if (item.text != "全选" && item.iconCls == 'tree-checkbox1') {
tmenu.data("distic")[item.text] = true;
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox0'
});
dataFilter(field);
} else if (item.text != "全选") {
delete tmenu.data("distic")[item.text];
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'tree-checkbox1'
});
dataFilter(field);
}
}
});
}
/**
* 从原始rows中过滤数据
* @param field 当前列
**/
function dataFilter(field) {
var newRows = $('#tt').data("baseRows");
var temp = [];
var disticValue = $('#tmenu_' + field).data('distic');
if (haveProp(disticValue)) {
$.each(newRows,
function(k, v) {
if (!disticValue[v[field]]) {
temp.push(v);
}
});
}
$('#tt').datagrid("loadData", temp);
}
/**
* 判断json对象中是否存在元素
* @param obj json对象
**/
function haveProp(obj) {
var having = false;
if (!obj) return having;
$.each(obj,
function() {
having = true;
return;
});
return having;
}
CSS:
body{
background:#fff;
}