Easy UI combogrid動態加載數據
阿新 • • 發佈:2017-09-25
遠程 panel images 指定 ret 技術 fit title response
場景:
datagrid的每一行允許編輯,一行中有一個字段,編輯時,提供下拉框選項,供選擇。
下拉框選項有多個列。如下圖所示:(點擊紅框內的下拉按鈕,會彈出綠框內的內容)
要求:
每行彈出的下拉框內容並不完全一致,需要根據某些變化的條件,隨機獲取。
代碼:
path是datagrid的一個字段,這個字段在編輯時,需要以下拉選項的形式出現。
這裏只展示一個字段的編輯選項,是如何配置combogrid動態加載下拉框選項值的。
{
// datagrid的其他字段...
},
{
field : ‘path‘, // 實際屬性
title : ‘Path‘, // 頁面顯示的列名
editor : {
type:‘combogrid‘, // 指定使用combogrid組件
options:{ // combogrid組件的屬性設置
panelWidth : 450,
panelHeight : 250,
idField : ‘id‘, // 選中下拉選項時,實際保存的值,來自columns
textField : ‘path‘, // 選中下拉選項時,框中顯示的值,來自columns
method : "GET", // ajax動態請求的方式
url : ‘/rest/test?id=‘ + $(‘#id_select‘).val(), // 在這裏配置url,並不好用。url的值需要在每次請求前動態修改才可以。
mode : ‘remote‘, // 指定是調用遠程方法獲取
fitColumns : true,
multiple: false,
editable: false, // 不可編輯
columns : [[
{
field : ‘id‘,
title : ‘id‘,
width : 50,
hidden : true
},
{
field : ‘path‘,
title : ‘Path‘,
width : 150
},
]],
onBeforeLoad : function(){
// 關鍵代碼:在每次ajax請求前,修改url的值
$(this).datagrid(‘options‘).url = ‘/rest/test?id=‘ + $(‘#id_select‘).val();
},
loadFilter: function (respose){
// 關鍵代碼:將返回的值,轉為combogrid可識別的數據。
// combogrid只要兩個字段:total,總數;rows,所有列的數據,是一個數組。
// response.data是一個對象list
respose.total = respose.data.length;
respose.rows = respose.data;
return respose;
},
}
},
},
{
// datagrid的其他字段...
}
Easy UI combogrid動態加載數據