Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
更新時間:2014年01月06日 16:42:38 作者:
要求選擇“地區(qū)”及“代維公司”后,刷新第一個DataGrid框體,下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集
我們有一個模塊如下圖,要求選擇“地區(qū)”及“代維公司”后,刷新第一個DataGrid框體
并以第一個結(jié)果集中的行為數(shù)據(jù)條件點擊完成下一個框體的檢索
現(xiàn)在我們已完成相應(yīng)功能,并在選擇“地區(qū)”及“代維公司”并保證這兩個選項同時有值后,自動刷新第一個DataGrid(DG1)結(jié)果集
但是在DG1刷新完畢后,后面兩個緊跟的DG2及DG3還是保有之前的結(jié)果
我試圖更改DG2及DG3的查詢條件,手動傳一個空的ID值給query()方法,但是后被后臺的Controller層當(dāng)作首次查詢return掉
于是查到這樣一個方法,可以給它們一個空結(jié)果集串
如下
//修改代維公司選框后重新提交查詢
function query1(){
var params = $('#dg1').datagrid('options').queryParams;
params.region = $('#region').combotree('getValue');
params.company_id = $('#company_id').combotree('getValue');
params.contract_type = "line";//*目前寫死為線路,后期再優(yōu)化為標(biāo)簽頁
if(params.company_id == "" || params.region == ""){
return;
}
$("#dg1").datagrid('load');
$('#dg2').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid
$('#dg3').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid
}
這樣便可以順利清空DG2及DG3中結(jié)果集的數(shù)據(jù)
還有一種方法,就是遍歷并刪除結(jié)果集中的數(shù)據(jù)
var item = $('#filegrid').datagrid('getRows');
if (item) {
for (var i = item.length - 1; i >= 0; i--) {
var index = $('#filegrid').datagrid('getRowIndex', item[i]);
$('#filegrid').datagrid('deleteRow', index);
}
}
殊途同歸
并以第一個結(jié)果集中的行為數(shù)據(jù)條件點擊完成下一個框體的檢索
現(xiàn)在我們已完成相應(yīng)功能,并在選擇“地區(qū)”及“代維公司”并保證這兩個選項同時有值后,自動刷新第一個DataGrid(DG1)結(jié)果集
但是在DG1刷新完畢后,后面兩個緊跟的DG2及DG3還是保有之前的結(jié)果
我試圖更改DG2及DG3的查詢條件,手動傳一個空的ID值給query()方法,但是后被后臺的Controller層當(dāng)作首次查詢return掉
于是查到這樣一個方法,可以給它們一個空結(jié)果集串
如下
復(fù)制代碼 代碼如下:
//修改代維公司選框后重新提交查詢
function query1(){
var params = $('#dg1').datagrid('options').queryParams;
params.region = $('#region').combotree('getValue');
params.company_id = $('#company_id').combotree('getValue');
params.contract_type = "line";//*目前寫死為線路,后期再優(yōu)化為標(biāo)簽頁
if(params.company_id == "" || params.region == ""){
return;
}
$("#dg1").datagrid('load');
$('#dg2').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid
$('#dg3').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid
}
這樣便可以順利清空DG2及DG3中結(jié)果集的數(shù)據(jù)
還有一種方法,就是遍歷并刪除結(jié)果集中的數(shù)據(jù)
復(fù)制代碼 代碼如下:
var item = $('#filegrid').datagrid('getRows');
if (item) {
for (var i = item.length - 1; i >= 0; i--) {
var index = $('#filegrid').datagrid('getRowIndex', item[i]);
$('#filegrid').datagrid('deleteRow', index);
}
}
殊途同歸
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery easyui datagrid動態(tài)查詢數(shù)據(jù)實例講解
- 擴展easyui.datagrid,添加數(shù)據(jù)loading遮罩效果代碼
- jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
- jQuery EasyUI之DataGrid使用實例詳解
- jQuery Easyui DataGrid點擊某個單元格即進入編輯狀態(tài)焦點移開后保存數(shù)據(jù)
- 實現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
- 詳解EasyUi控件中的Datagrid
- jquery Easyui Datagrid實現(xiàn)批量操作(編輯,刪除,添加)
- EasyUI使用DataGrid實現(xiàn)動態(tài)列數(shù)據(jù)綁定
相關(guān)文章
使用jQuery全局事件ajaxStart為特定請求實現(xiàn)提示效果的代碼
首先,重寫Ajax方法的代價太高,仍然可以利用jQuery自身的Ajax Events。2010-12-12
利用JQuery和Servlet實現(xiàn)跨域提交請求示例分享
這篇文章主要介紹了利用JQuery和Servlet實現(xiàn)跨域提交請求示例,需要的朋友可以參考下2014-02-02
jQuery中ajax的load()與post()方法實例詳解
這篇文章主要介紹了jQuery中ajax的load()與post()方法,結(jié)合實例詳細(xì)分析了jQuery中l(wèi)oad()與post()方法實現(xiàn)ajax交互的相關(guān)技巧與注意事項,需要的朋友可以參考下2016-01-01
jQuery validate插件實現(xiàn)ajax驗證重復(fù)的2種方法
這篇文章主要介紹了jQuery validate插件實現(xiàn)ajax驗證重復(fù)的2種方法,結(jié)合完整實例形式分析了jQuery validate插件的使用技巧,需要的朋友可以參考下2016-01-01
淺談jQuery的bind和unbind事件(綁定和解綁事件)
下面小編就為大家?guī)硪黄獪\談jQuery的bind和unbind事件(綁定和解綁事件)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
淺析Bootstrip的select控件綁定數(shù)據(jù)的問題
這篇文章主要介紹了淺析Bootstrip的select控件綁定數(shù)據(jù)的問題 的相關(guān)資料,小編認(rèn)為非常具有參考價值,感興趣的朋友一起看下吧
2016-05-05 
