jEasyUI 动态改变列学习笔记
jEasyUI 是一款基于 jQuery 的开源 UI 库，凭借其简单易用、强大灵活的特性，在 Web 开发领域得到广泛应用。本文将介绍如何使用 jEasyUI 来实现动态改变列的功能。
实现原理
通过调用 jEasyUI 提供的 API，可以轻松地对表格的列进行增加、移除、隐藏和排序等操作。当用户需要动态改变表格的列时，我们只需要按照其需求利用相关 API 进行操作即可。
实例演示
HTML 代码
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 动态改变列学习笔记</title>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
url="datagrid_data.json"
title="DataGrid - Dynamic Columns"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:150">Attribute</th>
</tr>
</thead>
</table>
<div style="margin-top:20px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addColumn()">Add Column</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeColumn()">Remove Column</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="hideColumn()">Hide Column</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="showColumn()">Show Column</a>
</div>
<script>
//添加列
function addColumn(){
var col = {
field:'newColumn',
title:'New Column',
width:100,
align:'right'
};
$('#dg').datagrid('addEditor',col);
$('#dg').datagrid('addFilter',col);
$('#dg').datagrid('addSorter',col);
$('#dg').datagrid('addColumn',{
field:col.field,
title:col.title,
width:col.width,
align:col.align
});
}
//移除列
function removeColumn(){
var col = $('#dg').datagrid('getColumnFields');
if(col.length>1){
$('#dg').datagrid('removeEditor',col[col.length-1]);
$('#dg').datagrid('removeFilter',col[col.length-1]);
$('#dg').datagrid('removeSorter',col[col.length-1]);
$('#dg').datagrid('deleteColumn',col[col.length-1]);
}
}
//隐藏列
function hideColumn(){
var col = $('#dg').datagrid('getColumnFields');
if(col.length>1){
$('#dg').datagrid('hideColumn',col[col.length-1]);
}
}
//显示列
function showColumn(){
var col = $('#dg').datagrid('getColumnFields');
if(col.length>1){
$('#dg').datagrid('showColumn',col[col.length-1]);
}
}
</script>
</body>
</html>
JS 代码
javascriptCopy Code$(function(){
$('#dg').datagrid({
url:'datagrid_data.json',
rownumbers:true,
fitColumns:true,
singleSelect:true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product',width:100},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:150}
]],
onLoadSuccess:function(data){
//设置表头的菜单
var header = $('#dg').datagrid('getPanel').find('.datagrid-header');
var menu = header.find('div.datagrid-cell-menu');
menu.unbind('.menu').bind('click.menu', function(e){
var field = $(this).parent().attr('field');
var column = $('#dg').datagrid('getColumnOption', field);
if (column){
if (!column.hideable){
$(this).menu('disableItem', $(this).menu('findItem', 'Hide'));
} else {
$(this).menu('enableItem', $(this).menu('findItem', 'Hide'));
}
}
header.menu('show', {
left:e.pageX,
top:e.pageY
});
return false;
});
}
});
});
效果展示
当用户点击"Add Column"按钮时，可添加一列名为"New Column"的新列。
当用户点击"Remove Column"按钮时，可移除表格最右侧的列。
当用户点击"Hide Column"按钮时，可隐藏表格最右侧的列。
当用户点击"Show Column"按钮时，可显示上次隐藏的列。
总结
本文介绍了如何使用 jEasyUI 实现动态改变列的功能。通过调用 jEasyUI 提供的 API 可以实现对表格列的增加、移除、隐藏和排序等操作。希望本文能给大家在实际开发中使用 jEasyUI 带来帮助。