EasyUI实战篇之datagrid:如何重新设置datagrid所配置的属性(options)并重新查询列表(relaod)
http://www.stepday.com/topic/?873
今天在使用EasyUI的datagrid列表组件想实现一个列表的展现,且列表上方有搜索条件,初始化的时候我是这样配置的:
1.
<
table
id
=
"tBaoXiuList"
title
=
""
class
=
"easyui-datagrid"
style
=
"width: 723px; height: auto"
url
=
"/AjaxCommon/t_baoxiu_ajax.asp?type=getIndexList"
toolbar
=
"#bar_search"
pageSize
=
"30"
pagination
=
"true"
rownumbers
=
"true"
fitcolumns
=
"true"
singleselect
=
"true"
>
2.
3.
</
table
>
这样根据参数是可以查询出数据的。但是当我想根据查询参数进行数据过滤的时候,定然是需要将参数加入到默认url后面去才行的。
开始想到的办法是通过datagri的属性queryParams来实现:
1.
$(
'#tBaoXiuList'
).datagrid({
2.
queryParams:{
3.
keyName:keyName,
4.
keyVal:keyVal
5.
}
6.
});
7.
8.
$(
'#tBaoXiuList'
).datagrid(
"reload"
);
结果发现这样并未将参数传递到后台页面进行数据过滤。
最后想到的方法是先通过datagtrid的options属性找到且url,修改url后通过reload再次请求数据,示例代码如下所示:
1.
var
keyName = $(
"#txtKeyName"
).combobox(
"getValue"
);
2.
var
keyVal = $(
"#txtKeyVal"
).val();
3.
4.
$(
'#tBaoXiuList'
).datagrid(
'options'
).url =
"/AjaxCommon/t_baoxiu_ajax.asp?type=getIndexList&keyName="
+ keyName +
"&keyVal="
+ escape(keyVal);
5.
$(
"#tBaoXiuList"
).datagrid(
'reload'
);
示例效果如如下所示:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!