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({
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_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({
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_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 }”);<!—强制设置翻页列表的数据不在当前的列表的清空 –>
}
},
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(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); <!—展开节点–>
}