首页 > 代码库 > Easyui主要组件用法

Easyui主要组件用法

Easyui主要组件用法说明:

1.  combogrid用法

说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示例区别为单独和批量的combogrid提供的数据操作)

以下面输入框为列: 

1.<input type="text" id="org" name="org" required="true" class="input" style="width:188px;"/>

2.<input type="text" id="org" name="org" required="true" class="input easyui-validatebox" style="width:188px;"/><!—错误的写法-->

 

1-1:combogrid(添加)

$("#org").combogrid({

      onl oadError:showError, <!—出错后的调用函数-->

      panelWidth:450, <!—弹出后面板的宽度-->

      idField:‘so_id‘, <!—存储到数据库后的值-->

      textField:‘so_name‘, <!—选择后的可见名-->

      pagination:true, <!—是否显示翻页导航-->

      rownumbers:true, <!—是否显示行号-->

      mode:‘remote‘, <!—远程调用-->

      url:‘${path}/sys/sys_orgPage.do‘, <!—调用的翻页列表动作-->

      columns:[[

          {field:‘so_name‘,title:‘机构名称‘,width:100},

          {field:‘so_type‘,title:‘机构类型‘,width:120}

      ]], <!—弹出后显示的列表表头-->

      onBeforeLoad:function(param){ <!—设置refresh是否重新计算翻页总数 -->

          param.refresh="1";

      },

      onSelect:function(index,data){

         <!—下拉选择后做其他的事情-->

      }

  }).combogrid("panel").css("overflow","hidden");<!—控制某些浏览器出现双滚动条的情况-->

注意: 在表单保存时还需做如下操作:

//单独添加时

if($(‘#org‘).combogrid("getValue") == $(‘# org‘‘).combogrid("getText")) {

    $(‘# org‘‘).combogrid("clear");

    $("#org‘").combogrid("grid").datagrid("load", {"refresh":"1"});

}

//批量添加时

var combonames = $("#input[comboname=org]");

$.each(combonames, function(i, j) {

  if($(j).combogrid("getValue") == $(j).combogrid("getText")) {

      $(j).combogrid("clear");

      $(j).combogrid("grid").datagrid("load", {"refresh":"1"});

   }

});

主要是为了防止用户恶意输入列表中不存在的数据,以及清空不存在的数据后重新加载翻页列表

 

1-2: combogrid(修改)

var init=false;

var sel=false;

$("#org").combogrid({

      onl oadError:showError, <!—出错后的调用函数-->

      panelWidth:450, <!—弹出后面板的宽度-->

      idField:‘so_id‘, <!—存储到数据库后的值-->

      textField:‘so_name‘, <!—选择后的可见名-->

      pagination:true, <!—是否显示翻页导航-->

      rownumbers:true, <!—是否显示行号-->

      mode:‘remote‘, <!—远程调用-->

      url:‘${path}/sys/sys_orgPage.do‘, <!—调用的翻页列表动作-->

      columns:[[

          {field:‘so_name‘,title:‘机构名称‘,width:100},

          {field:‘so_type‘,title:‘机构类型‘,width:120}

      ]], <!—弹出后显示的列表表头-->

      onBeforeLoad:function(param){ <!—设置refresh是否重新计算翻页总数 -->

          param.refresh="1";

      },

onLoadSuccess:function(data){ <!—针对单独 -->

         if(!init){ <!—防止重复的判断 -->

           sel=false; <!—设置选中后关联其他的文本值的判断 -->

           init=true;

           $(this).combogrid("setText","${ so_name }");<!—强制设置翻页列表的数据不在当前的列表的清空 -->

        }

   },

  onl oadSuccess:function(data){ <!—针对批量 -->

        if (!$(this).attr("init")) {

         $(this).attr("init", true);

         $(this).combogrid("setText", $(this).attr("txt"));

        }

   },

      onSelect:function(index,data){

         if (!sel) {

           sel = true;

       } else {

            $(‘#XX).text(data.so_name);

       }

      }

  }).combogrid("panel").css("overflow","hidden");<!—控制某些浏览器出现双滚动条的情况-->

注意: 在表单保存时还需做如下操作:

//单独修改时

if($(‘#org‘).combogrid("getValue") == $(‘# org‘‘).combogrid("getText")) {

    $(‘# org‘‘).combogrid("clear");

    $("#org‘").combogrid("grid").datagrid("load", {"refresh":"1"});

}

//批量修改时

var combonames = $("#form input[comboname=org]");

$.each(combonames, function(i, j) {

  if($(j).combogrid("getValue") == $(j).combogrid("getText")) {

      $(j).combogrid("clear");

      $(j).combogrid("grid").datagrid("load", {"refresh":"1"});

   }

});

主要是为了防止用户恶意输入列表中不存在的数据,以及清空不存在的数据后重新加载翻页列表

2.  combobox用法

说明:combobox可提供下拉的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值)

以下面输入框为列: 

1.<input type="text" id="org" name="org" required="true" class="input" style="width:188px;"/>

2.<input type="text" id="org" name="org" required="true" class="input easyui-validatebox" style="width:188px;"/><!—错误的写法-->

2-1:combobox(添加&修改)

$("#org").combobox({

       panelHeight:100,

       mode:"remote",

       url:"${path}/sys/org_list.do?q=",

       valueField:‘so_id‘,

       textField:‘so_name‘

});

 $(‘# org ‘).combobox("options").url="${path}/ sys/org_list.do";

注意: 在表单保存时还需做如下操作:

var select = $(‘#org);

 var panel = select.combobox("panel");

 var selectedOption = panel.find("div.combobox-item-selected");

   if(selectedOption.length==0){

     select.combobox("setValue","");

     select.combobox("setText","");

     var url = select.combobox("options").url;

     select.combobox("reload",url+"&q=");

     select.combobox("options").url = url;

  }

主要是为了防止用户恶意输入不存在的数据,以及清空不存在的数据后重新加载下拉数据

3.  combotree用法

3-1: combotree(添加和修改)

说明:combotree可提供下拉的树形数据选择(可提供复选、单选的等功能)

以下面输入框为列: 

1.<input type="text" id="org" name="org" required="true" class="input" style="width:188px;"/>

$("#org").combotree({

   data:服务器提供的数据,

onLoadSuccess:function(node, data){

      $("#org").tree("collapseAll");<!—关闭树节点-->

      var root = $("#tree").tree("getRoot");<!—得到根节点-->

       if (root != null) {

       $("#tree").tree("expand", root.target); <!—展开第一个根节点-->

       }

    }

});

     var selected =  $("#org").combotree("tree").tree("find", xx); <!—找到某个节点-->

     if(selected!=null){

        $("#org ").combotree("tree").tree("select", selected.target); <!—选中节点-->

        $("#org").combotree("tree").tree("expandTo", selected.target); <!—展开节点-->

}

4.tree用法

4-1: tree(添加和修改)

说明:tree可提供下拉的树形菜单数据选择

以下面输入框为列: 

1.<input type="text" id="org" name="org" required="true" class="input" style="width:188px;"/>

$("#org").otree({

   data:服务器提供的数据,

onLoadSuccess:function(node, data){

      $("#org").tree("collapseAll");<!—关闭树节点-->

      var root = $("#tree").tree("getRoot");<!—得到根节点-->

       if (root != null) {

       $("#tree").tree("expand", root.target); <!—展开第一个根节点-->

       }

    }

});

     var selected =  $("#org").tree ("tree").tree("find", xx); <!—找到某个节点-->

     if(selected!=null){

        $("#org ").tree ("tree").tree("select", selected.target); <!—选中节点-->

        $("#org").tree ("tree").tree("expandTo", selected.target); <!—展开节点-->

}

 

Easyui主要组件用法