zoukankan      html  css  js  c++  java
  • easyui中 combogrid控件的loadData方法加载本地数据

      在做的一个项目要用到easyUI,开始要我做数据库设计和写一些复杂的存储过程等,后面写前端的人手不够,我又对业务熟悉对前段也相对来说熟悉一点,但对easyUI从来没用过,于是看着API写前段,这两天碰到一个问题就是要级联的加载combogrid里的数据。死活把数据加载不出来 ,在博问上也问了,oschina上也问了,元旦了,大家都过节,没有回答,代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
            <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
    </head>
        <link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
        <script id="others_jquery_easyui_131" type="text/javascript" class="library" src="/js/sandbox/jquery-easyui/jquery.easyui.min.js"></script>
    
            <script type="text/javascript">
                $(function () {
                    $("#userreg_middle_zcrj_tb").datagrid({
                         450,
                        height: 250,
                        rownumbers: true,
                        columns: [[
                          { field: 'code', title: 'code',  100, editor: { type: 'combobox'} },
                          { field: 'name', title: 'name',  100, editor: { type: 'combobox'} },
                          { field: 'addr', title: 'addr',  100, editor: { type: 'text'} },
                          { field: 'col4', title: '',  50
                          }
                       ]]
                    });
                    $('#cc').combogrid({
                        panelWidth: 450,
                        value: 'name',
                        idField: 'code',
                        textField: 'name',
                        columns: [[{ field: 'code', title: 'Code',  60 },
                           { field: 'name', title: 'Name',  100 },
                           { field: 'addr', title: 'Address',  120 },
                           { field: 'col4', title: 'Col41',  100}]]
                    });
                    var a = [{ code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf' },
                    { code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf' },
                    { code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf'}];
                    //  var b = $.parseJSON(a);
                    $("#userreg_middle_zcrj_tb").datagrid("loadData", a);
                    $("#cc").combogrid("loadData", a);
                });
            </script>
        
    <body>
          <table id="userreg_middle_zcrj_tb"></table> 
          <input id="cc" name="dept" value="01"/>  
    </body>
    </html>

    最关键是最后两个loadData,在datagrid中加载成功,在combogrid中加载不成功,而在文档中写着:

     

    组合表格
    
    继承$.fn.combo.defaults和$.fn.datagrid.defaults,使用$.fn.combogrid.defaults重载默认值。
    
    事件
    
    事件继承自定义组合框和数据表格。

    就想当然的以为loadData呗combogrid继承过来了。然后一直调试抓狂,今天又把combogrid的文档看了一遍,有这样的一个方法 

    grid none 返回数据表格对象。

    突然就豁然开朗了。

    只需要把上面的修改成:

      $("#cc").combogrid("grid").datagrid("loadData", a);

    就解决了

          这件事情不熟悉api导致浪费了两天的时间,这个教训告诉我,对于不熟悉的东西要多在文档上找解决方法,包括前几天datagrid编辑的问题,在官方的文档里直接有两个相关的例子。要重视官方文档啊。

  • 相关阅读:
    lua -- handler
    class() 高级用法 -- lua
    聊聊javascript的null和undefined
    在vue-cli搭建的项目中增加后台mock接口
    vue-cli+webpack在生成的项目中使用bootstrap方法(二)
    vue-cli+webpack在生成的项目中使用bootstrap方法(一)
    Node.js项目APM监控之New Relic
    让sublime text3支持Vue语法高亮显示
    在javascript中获取一个对象内属性的个数
    debian8.5安装sublime text3
  • 原文地址:https://www.cnblogs.com/ac1985482/p/2842272.html
Copyright © 2011-2022 走看看