easyui-treegrid

作者: 明明德撩码 | 来源:发表于2018-10-22 18:00 被阅读3次

    1、根据物料的不同版本更新树列表(treegrid),树根节点重新加载刷新。

    image.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、当查询条件中选择的物料进行切换时,树形表格中的数据要刷新成最新选择的物料数据,作为树形表格的跟节点列表进行展现

    查询前 查询后
    实现代码
    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);
            }
        }
    
    

    相关文章

      网友评论

        本文标题:easyui-treegrid

        本文链接:https://www.haomeiwen.com/subject/cyngzftx.html