easyui-treegrid
2018-10-22 本文已影响3人
明明德撩码
1、根据物料的不同版本更新树列表(treegrid),树根节点重新加载刷新。
![](https://img.haomeiwen.com/i4176128/fb6483c6ba7e5a30.png)
var treedata = $("#cidp_pbom_pbomreview_tree").treegrid("getData");
if(treedata.length>0&&treedata[0].ID==dataid){
$("#cidp_pbom_pbomreview_tree").treegrid("reload",dataid);
}
dataid:为当查询条件中选择的物料。
关键点:选择的物料id和树列表中的id进行比较。
2、当查询条件中选择的物料进行切换时,树形表格中的数据要刷新成最新选择的物料数据,作为树形表格的跟节点列表进行展现
![](https://img.haomeiwen.com/i4176128/6f325a55e4ded57d.png)
![](https://img.haomeiwen.com/i4176128/54f1740bc4ce947a.png)
实现代码
var treedata = $("#cidp_pbom_pbomreview_tree").treegrid("getData");
$("#cidp_pbom_pbomreview_tree").treegrid("remove",treedata[0].ID);
在树列表上移除上一个物料树,重新加载就可以。
全部代码
查询页面代码:
<form id="cidp_bomapp_bomretrospect_queryform">
<table style="margin:5px auto">
<tr>
<td>
<label id="name_label">BOM类型:</label>
</td>
<td>
<input data-roles="mui-combobox" id="bomtype" name="bomtype" data-options="required:true,
valueField: 'label',
textField: 'value',
data: [{
label: 'PBOM',
value: 'PBOM'
},{
label: 'MBOM',
value: 'MBOM'
}]" />
</td>
<td>
<label id="code_label">物料:</label>
</td>
<td>
<input type="hidden" id="dataid" />
<input type="hidden" id="itemcode" />
<input name="name_v" id="name_v" data-roles="mui-validatebox"
data-options="validType:'maxLength[32]',required:true" />
<a href="#" data-roles="mui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="$m('cidp/bomapp/bomretrospect').selectMaterial();"></a>
</td>
<td>
<label id="name_label">BOM版本:</label>
</td>
<td>
<input id="bomversion" name="bomversion" value="" >
</td>
<tr>
<td style="text-align:center" colspan='6' >
<a id="btn" href="#" data-roles="mui-linkbutton" data-options="iconCls:'icon-search'" onclick="$m('cidp/bomapp/bomretrospect').queryOfReview()">逆向追溯</a>
<a id="btn" href="#" data-roles="mui-linkbutton" data-options="iconCls:'icon-search'" onclick="$m('cidp/bomapp/bomretrospect').queryOfAhead()">正向追溯</a>
<a id="btn" href="#" data-roles="mui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$m('cidp/bomapp/bomretrospect').reset()">重置</a>
</td>
</tr>
</table>
</form>
树形表格(树列表)页面代码:
<table id="cidp_pbom_pbomreview_tree" data-roles="mui-treegrid"
data-options="url:$m('cidp/bomapp/bomretrospect').treeReviewPath,idField:'ID', treeField:'CODE_V', fit: true, border: false, rownumbers:true, fitColumns:false">
<thead>
<#if childFields?exists>
<tr>
<#list childFields as field>
<!--除数量外的系统属性-->
<#if '${field.ATTRID}' != ''>
<th data-options="field:'${field.ATTRCODE}_V',width:200">${field.ATTRNAME}</th>
</#if>
<#if '${field.ATTRCODE}' == 'QUANTITY'>
<th data-options="field:'${field.ATTRCODE}',width:100">${field.ATTRNAME}</th>
</#if>
</#list>
</tr>
</#if>
</thead>
</table>
正向追溯代码:
/**
* 正向展开查询按钮事件
*/
this.queryOfAhead = function() {
debugger;
var bomtype = $('#bomtype').combobox('getValue');
var dataid = queryForm.find('#dataid').val();
var bomversion = $('#bomversion').combobox('getValue');
if (queryForm.form('validate')) {
$("#cidp_pbom_pbomreview_tree").treegrid('reload', {bomtype:bomtype,dataid:dataid,bomversion:bomversion,reviewtype:'ahead'});
}
var treedata = $("#cidp_pbom_pbomreview_tree").treegrid("getData");
if(treedata.length>0&&treedata[0].ID==dataid){
$("#cidp_pbom_pbomreview_tree").treegrid("reload",dataid);
}else{
$("#cidp_pbom_pbomreview_tree").treegrid("remove",treedata[0].ID);
}
}