[原创]EasyUI的TreeGrid查询功能实现

最近需要实现对treeGrid的查询功能,具体查询界面如下:

可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用

TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下:

<span class="pln">    </span><span class="kwd">function</span><span class="pln"> searchROM</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
 
        </span><span class="kwd">var</span><span class="pln"> product </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#Product'</span><span class="pun">).</span><span class="pln">combobox</span><span class="pun">(</span><span class="str">'getValue'</span><span class="pun">);</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> keytype </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#keytype'</span><span class="pun">).</span><span class="pln">combobox</span><span class="pun">(</span><span class="str">'getValue'</span><span class="pun">);</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> keywords </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#keywords'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> url </span><span class="pun">=</span><span class="pln"> encodeURI</span><span class="pun">(</span><span class="str">'/GoodsROM/ROMList?product='</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> product </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&keytype='</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> keytype </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&keywords='</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> keywords</span><span class="pun">+</span><span class="str">'&'</span><span class="pun">+</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">());</span><span class="pln">
        $</span><span class="pun">.</span><span class="pln">post</span><span class="pun">(</span><span class="pln">url</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{},</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> d </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">;</span><span class="com">//返回json格式结果</span><span class="pln">
            $</span><span class="pun">(</span><span class="str">'#grid'</span><span class="pun">).</span><span class="pln">treegrid</span><span class="pun">(</span><span class="str">'loadData'</span><span class="pun">,</span><span class="pln">d</span><span class="pun">);</span><span class="com">//加载数据更新treegrid</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="str">'json'</span><span class="pun">);</span><span class="pln">
 
    </span><span class="pun">}</span>

有网友照做,发现显示不出来,他的json数据格式为:

<span class="pun">{</span><span class="str">"total"</span><span class="pun">:</span><span class="lit">9</span><span class="pun">,</span><span class="str">"rows"</span><span class="pun">:[{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"1"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"数据融合系统"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"-1"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"统计数据"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"1"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"3"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"全业务套餐发展量"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"4"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"状态统计查询"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"5"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"装拆机统计查询"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"6"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"产品(分客户群)装拆机统计"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"7"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"清单"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"1"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"8"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"子项一"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"7"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"9"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"子项二"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"7"</span><span class="pun">}]}</span>

问题出在treegrid支持的Json格式,根节点没有_parentId,应该如下格式:

<span class="pun">{</span><span class="str">"total"</span><span class="pun">:</span><span class="lit">9</span><span class="pun">,</span><span class="str">"rows"</span><span class="pun">:[{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"1"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"数据融合系统"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"统计数据"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"1"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"3"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"全业务套餐发展量"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"4"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"状态统计查询"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"5"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"装拆机统计查询"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"6"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"产品(分客户群)装拆机统计"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"2"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"7"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"清单"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"1"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"8"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"子项一"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"7"</span><span class="pun">},{</span><span class="str">"Identifier"</span><span class="pun">:</span><span class="str">"9"</span><span class="pun">,</span><span class="str">"Area_Name"</span><span class="pun">:</span><span class="str">"子项二"</span><span class="pun">,</span><span class="str">"_parentId"</span><span class="pun">:</span><span class="str">"7"</span><span class="pun">}]}</span>
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

注册