Easyui组件用法.pdf

该【Easyui组件用法 】是由【小sjj】上传分享，文档一共【10】页，该文档可以免费在线阅读，需要了解更多关于【Easyui组件用法 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。Easyui主要组件用法说明:

说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查
询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面
的示例区别为单独和批量的combogrid提供的数据操作)
以下面输入框为列:
1.<inputtype="text"id="org"name="org"required="true"class="input"
style="width:188px;"/>
2.<inputtype="text"id="org"name="org"required="true"class="input
easyui-validatebox"style="width:188px;"/><!—错误的写法-->
1-1:combogrid(添加)
$("#org").combogrid({
onLoadError:showError,<!—出错后的调用函数-->
panelWidth:450,<!—弹出后面板的宽度-->
idField:'so_id',<!—存储到数据库后的值-->
textField:'so_name',<!—选择后的可见名-->
pagination:true,<!—是否显示翻页导航-->
rownumbers:true,<!—是否显示行号-->
mode:'remote',<!—远程调用-->
url:'${path}/sys/',<!—调用的翻页列表动作-->
columns:[[
{field:'so_name',title:'机构名称',width:100},
{field:'so_type',title:'机构类型',width:120}
]],<!—弹出后显示的列表表头-->
onBeforeLoad:function(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"});
}
//批量添加时
varcombonames=$("#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(修改)
varinit=false;
varsel=false;
$("#org").combogrid({
onLoadError:showError,<!—出错后的调用函数-->
panelWidth:450,<!—弹出后面板的宽度-->
idField:'so_id',<!—存储到数据库后的值-->
textField:'so_name',<!—选择后的可见名-->
pagination:true,<!—是否显示翻页导航-->
rownumbers:true,<!—是否显示行号-->
mode:'remote',<!—远程调用-->
url:'${path}/sys/',<!—调用的翻页列表动作-->
columns:[[
{field:'so_name',title:'机构名称',width:100},
{field:'so_type',title:'机构类型',width:120}
]],<!—弹出后显示的列表表头-->
onBeforeLoad:function(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"));
}
},
onSelect:function(index,data){
if(!sel){
sel=true;
}else{
$('#XX).text();
}
}
}).combogrid("panel").css("overflow","hidden");<!—控制某些浏览器
出现双滚动条的情况-->
注意:在表单保存时还需做如下操作:
//单独修改时
if($('#org').combogrid("getValue")==$('#org'').combogrid("getText")){
$('#org'').combogrid("clear");
$("#org'").combogrid("grid").datagrid("load",{"refresh":"1"});
}
//批量修改时
varcombonames=$("#forminput[comboname=org]");
$.each(combonames,function(i,j){
if($(j).combogrid("getValue")==$(j).combogrid("getText")){
$(j).combogrid("clear");
$(j).combogrid("grid").datagrid("load",{"refresh":"1"});
}
});
主要是为了防止用户恶意输入列表中不存在的数据,以及清空不存在
的数据后重新加载翻页列表

说明:combobox可提供下拉的数据选择并可进行数据的过滤查询(查
询的传人参数为q,可在控制器中获取这个参数传过来的值)
以下面输入框为列:
1.<inputtype="text"id="org"name="org"required="true"class="input"
style="width:188px;"/>
2.<inputtype="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/?q=",
valueField:'so_id',
textField:'so_name'
});
$('#org').combobox("options").url="${path}/sys/";
注意:在表单保存时还需做如下操作:
varselect=$('#org);
varpanel=("panel");
varselectedOption=("-item-selected");
if(==0){
("setValue","");
("setText","");
varurl=("options").url;
("reload",url+"&q=");
("options").url=url;
}
主要是为了防止用户恶意输入不存在的数据,以及清空不存在的数据
后重新加载下拉数据

3-1:combotree(添加和修改)
说明:combotree可提供下拉的树形数据选择(可提供复选、单选的等功
能)
以下面输入框为列:
1.<inputtype="text"id="org"name="org"required="true"class="input"
style="width:188px;"/>
$("#org").combotree({
data:服务器提供的数据,
onLoadSuccess:function(node,data){
$("#org").tree("collapseAll");<!—关闭树节点-->
varroot=$("#tree").tree("getRoot");<!—得到根节点-->
if(root!=null){
$("#tree").tree("expand",);<!—展开第一个根节点
-->
}
}
});
varselected=$("#org").combotree("tree").tree("find",xx);<!—
找到某个节点-->
if(selected!=null){
$("#org").combotree("tree").tree("select",);<!—
选中节点-->
$("#org").combotree("tree").tree("expandTo",);
<!—展开节点-->
}

4-1:tree(添加和修改)
说明:tree可提供下拉的树形菜单数据选择
以下面输入框为列:
1.<inputtype="text"id="org"name="org"required="true"class="input"
style="width:188px;"/>
$("#org").otree({
data:服务器提供的数据,
onLoadSuccess:function(node,data){
$("#org").tree("collapseAll");<!—关闭树节点-->
varroot=$("#tree").tree("getRoot");<!—得到根节点-->
if(root!=null){
$("#tree").tree("expand",);<!—展开第一个根节点
-->
}
}
});
varselected=$("#org").tree("tree").tree("find",xx);<!—找到某
个节点-->
if(selected!=null){
$("#org").tree("tree").tree("select",);<!—选中
节点-->
$("#org").tree("tree").tree("expandTo",);<!—展
开节点-->
}