【沫沫金】miniui表格DataGrid動態Combobox功能實現

背景

業務須要，樹形表格每行可選一個下拉列，下拉數據依據行ID

效果

如上圖，每一行的批次列下拉框依據產品代號展現。

疑難

怎麼讓下拉根據行代號獲取數據？
想到兩種解決方案：一、初始化加載datagrid實現 二、點擊的時候動態改變下拉combobox請求地址實現

方案1
嘗試了重繪單元格時動態設置請求地址，html代碼是完成了，可是也上識別不出mini對象，根本彈不出；失敗
嘗試數據field內容設置爲combobox內容，內容過去了，頁面沒下拉功能；失敗

方案2
點擊時設置，事件好監控，問題是沒有獨立的Id沒法使用「mini.get()」獲取到combobox元素，想設置有心無力。
過程當中發現事件的e對象能夠識別到當前行下標，行node都反查出來了，就是不知道怎麼拿combobx，費腦子的很。
繼續翻Api發現mini.getByName能夠獲取到元素，就想試試。咱有下標啊，大不了定位唄，沒想到，還真成了。不只拿到了，並且只有一個。被我發現了，行編輯當前只有一個在進行，其餘的根本未激活，應該是，由於只拿到當前行。

成功

總結

一、獲取datagrid行數據，使用mini.get("datagrid1").getSelect()
由於：不用和我同樣，根據單元格元素，獲取下標，在反查行，沒這麼麻煩，上面一節了當。

二、datagrid單元格編輯，必須開啓allowCellSelect="true" allowCellEdit="true" multiSelect="true" 元素必須開起<div property="editor">屬性
三、樹形grid複選框使用datagrid的，好處是使用mini.get("treeTable").getSelectedNodes()直接獲取一整行數據，方便。

源碼以下：

<div id="treeTable" class="mini-treegrid" treeColumn="product" idField="id" parentField="parentId"

style="width: 100%; height:90%;" showTreeIcon="true" resultAsTree="false"
checkRecursive="false" value="11000514" expandOnLoad="3" allowCellSelect="true" allowCellEdit="true" multiSelect="true">
<div property="columns">
<div type="checkcolumn" width="50">選擇</div>
<div field="batchNumbers" renderer="onBatchNumberCombobox">批次
<div name="batchNumberCombobox" property="editor" class="mini-combobox" style="width:250px;" popupWidth="400" textField="ID" valueField="ID"
url="report/batchNumberList.action" value="" multiSelect="true" showClose="true" onbeforeshowpopup="beforeshowpopup" >'
<div property="columns">
<div header="批次號" field="ID"></div>
<div header="產品代號" field="TEXT"></div>
</div>
</div>
</div>
</div>
</div>

function beforeshowpopup(e) {
    var treegrid = mini.get("treeTable");
    var rowNode = treegrid.getSelected();
    var bnc = mini.getByName("batchNumberCombobox");
    bnc.load("report/batchNumberList.action?productCode="+rowNode.productCode);
}

好了，今天就到這裏，給你們分享的miniui表格datagrid動態設置每行combobox下拉內容的關鍵點及思路，我是沫沫金，我在51cto。