Easyui主要组件用法说明:
1. combogrid用法
说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示例区别为单独和批量的combogrid提供的数据操作)
以下面输入框为列:
1.<input type="text" id="org" name="org" required="true" class="input" style="188px;"/>
2.<input type="text" id="org" name="org" required="true" class="input easyui-validatebox" style="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:'机构名称',100},
{field:'so_type',title:'机构类型',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:'机构名称',100},
{field:'so_type',title:'机构类型',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="188px;"/>
2.<input type="text" id="org" name="org" required="true" class="input easyui-validatebox" style="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="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="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); <!—展开节点-->
}