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); <!—展开节点-->

}