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

背景

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

效果

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

疑難

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

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

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

成功

總結

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

2、datagrid單元格編輯，必須開啟allowCellSelect="true" allowCellEdit="true" multiSelect="true" 元素必須開起<div property="editor">屬性
3、樹形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。