《easyui组件用法》由会员分享，可在线阅读，更多相关《easyui组件用法（9页珍藏版）》请在金锄头文库上搜索。
1、Easyui 主要组件用法说明 :1. combogrid 用法说明:combogrid 可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为 q,可在控制器中获取这个参数传过来的值,下面的示例区别为单独和批量的 combogrid 提供的数据操作)以下面输入框为列:1.2.1-1:combogrid(添加)$(#org).combogrid(onLoadError:showError, panelWidth:450, idField:so_id, textField:so_name, pagination:true, rownumbers:true, mode:remote, u
2、rl:$path/sys/sys_orgPage.do, columns:field:so_name,title:机构名称,width:100,field:so_type,title:机构类型,width:120, onBeforeLoad:function(param) param.refresh=1;,onSelect:function(index,data).combogrid(panel).css(overflow,hidden); 注意: 在表单保存时还需做如下操作:/单独添加时if($(#org).combogrid(getValue) = $(# org).combogrid(g
3、etText) $(# org).combogrid(clear);$(#org).combogrid(grid).datagrid(load, refresh:1);/批量添加时var combonames = $(#inputcomboname=org);$.each(combonames, function(i, j) if($(j).combogrid(getValue) = $(j).combogrid(getText) $(j).combogrid(clear);$(j).combogrid(grid).datagrid(load, refresh:1););主要是为了防止用户恶意
4、输入列表中不存在的数据,以及清空不存在的数据后重新加载翻页列表1-2: combogrid(修改)var init=false;var sel=false;$(#org).combogrid(onLoadError: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_ty
5、pe,title:机构类型,width:120, onBeforeLoad:function(param) param.refresh=1;,onLoadSuccess:function(data) if(!init) sel=false; init=true;$(this).combogrid(setText,$ so_name );,onLoadSuccess:function(data) if (!$(this).attr(init) $(this).attr(init, true);$(this).combogrid(setText, $(this).attr(txt);,onSele
6、ct: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 =
7、 $(#form inputcomboname=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,可在控制器中获取这个
8、参数传过来的值)以下面输入框为列:1.2.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 = bobox(panel);var selectedOption = panel.find
9、(bobox-item-selected); if(selectedOption.length=0)bobox(setValue,);bobox(setText,);var url = bobox(options).url;bobox(reload,url+bobox(options).url = url;主要是为了防止用户恶意输入不存在的数据,以及清空不存在的数据后重新加载下拉数据3. combotree 用法3-1: combotree(添加和修改)说明:combotree 可提供下拉的树形数据选择( 可提供复选、单选的等功能)以下面输入框为列:1.$(#org).combotree( d
10、ata:服务器提供的数据,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).
11、combotree(tree).tree(expandTo, selected.target); 4.tree 用法4-1: tree(添加和修改)说明:tree 可提供下拉的树形菜单数据选择以下面输入框为列:1.$(#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);
