Easyui主要組件用法說明:

1.? combogrid用法

說明:combogrid可提供翻頁列表的數據選擇并可進行數據的過濾查詢(查詢的傳人參數為q,可在控制器中獲取這個參數傳過來的值,下面的示例區(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");<!—關閉樹節(jié)點-->

????? var root = $("#tree").tree("getRoot");<!—得到根節(jié)點-->

?????? if (root != null) {

?????? $("#tree").tree("expand", root.target); <!—展開第一個根節(jié)點-->

???? ??}

??? }

});

???? var selected =? $("#org").combotree("tree").tree("find", xx); <!—找到某個節(jié)點-->

???? if(selected!=null){

??????? $("#org ").combotree("tree").tree("select", selected.target); <!—選中節(jié)點-->

??????? $("#org").combotree("tree").tree("expandTo", selected.target); <!—展開節(jié)點-->

}

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");<!—關閉樹節(jié)點-->

????? var root = $("#tree").tree("getRoot");<!—得到根節(jié)點-->

?????? if (root != null) {

?????? $("#tree").tree("expand", root.target); <!—展開第一個根節(jié)點-->

???? ??}

??? }

});

???? var selected =? $("#org").tree ("tree").tree("find", xx); <!—找到某個節(jié)點-->

???? if(selected!=null){

??????? $("#org ").tree ("tree").tree("select", selected.target); <!—選中節(jié)點-->

??????? $("#org").tree ("tree").tree("expandTo", selected.target); <!—展開節(jié)點-->

}

?

總結

以上是生活随笔為你收集整理的Easyui主要组件用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。