1. 程式人生 > >Easy UI combogrid動態加載數據

Easy UI combogrid動態加載數據

遠程 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動態加載數據