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',
url:'${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("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){
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.
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 = 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.
$("#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.
$("#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);
}
【转载自】https://www.cnblogs.com/huangf714/p/5938117.html