easyui的datagrid显示或隐藏列

最新推荐文章于 2020-12-31 11:08:00 发布

原创最新推荐文章于 2020-12-31 11:08:00 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

easyui 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用easyui的datagrid组件根据用户选择的下拉框选项动态显示或隐藏列。通过监听下拉框的onChange事件，遍历所有列并调用datagrid的hideColumn和showColumn方法来实现列的隐藏与显示。同时，文章提到了在修改列显示时需注意保持列名与下拉框选项顺序的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.根据下拉框选择要显示的列

html:<input id="AirFactorMultiselect" name="factor" class="easyui-combotree" data-options="onChange:factorOnSelect" style="width:130px">

javascript:

///因子切换
function factorOnSelect(nv, ov) {
if (data != "" && data != null && data != undefined) {
var all = ["PM10", "PM25", "SO2", "NO2", "CO", "O3"];
$.each(all, function (lx, obj) {
dg.datagrid('hideColumn', obj);
});
$.each(nv, function (lx, obj) {
if (obj != 'all') {
dg.datagrid('showColumn', obj).datagrid('autoSizeColumn', obj);
}
});
}
}

2.发现AQI不受影响

修改var all = ["PM10", "PM25", "SO2", "NO2", "CO", "O3"];

为：var all = ["AQI", "PM10", "PM25", "SO2", "NO2", "CO", "O3"];（要和页面上因子下拉框里的顺序保持一致）