寫在前面:
最近項目的前框框架用的是ligerUI,一開始我是拒絕的,因為貌似ligerUI很少有人用,我真的很想問我們team的斌哥哥為什么要用ligerUI來做前端框架?????(啊哈哈哈,用什么都是一樣,反正都不會。。。)而且從來都沒有接觸過ligerUI,哎哎哎,做的過程中真的是很煩很煩,因為沒人能幫助,而且官網api大多數的demo都是從本地獲取數據,但是我們肯定不是拿本地數據的,而是從后台獲取數據噠。。只能慢點看api,看demo了。。。。還好還好。我做的module已經做出來了。啊哈哈。。。。。(也很感謝在做的過程中幫助過我的人,不得不說 有時候真的是別人沒有義務要去幫你解決一個哪怕是在別人看來很簡單很簡單的問題,我加了一個ligerUI群,里面四五百人,我在里面提問題,回復我的沒人。。。世態炎涼啊。。但是助人為樂哇。。。。)
對於ligerForm中的下拉框,首先url向后台發送請求,后台進行數據獲取,然后轉成對應的json格式對應的json格式對應的json格式的數據,重要的事情說三遍。廢話補多少 直接上代碼 簡單明了。。
1.前台頁面代碼:
form1 = $("#form1").ligerForm({ inputWidth: 170, labelWidth: 100, space: 15, labelAlign: 'right', validate: true, fields: [ { id: 'systemSelect', type: 'select', display: '系統', newline: true, name:'systemId', //當想要獲取下拉框里面的值的時候使用 //liger.get("comboboxName").getValue(); comboboxName:'systemSelect', options: { //向后台發送的請求路徑 url: '${baseURL}/listAllSystem.action', //下拉框中顯示內容 對應 的 id字段 valueField:'systemId', //下拉框中顯示的內容 對應 的字段 textField:'systemName', onSelected :function(newvalue){ //選中下拉框事件。。。 }, }, }, ], });
2.后台代碼:
@Controller("SystemAction") public class SystemAction extends ActionSupport{ //注入業務層接口 @Resource private SystemService systemService; //對於struts2返回的json格式的數據arr能被頁面接收 //需要提供一個get方法 這點不可以漏掉 private JSONArray arr; public JSONArray getArr() { return arr; } public String listAllSystem(){ List<System> systemList = systemService.getAll(System.class); arr = new JSONArray(); for(System sys:systemList){ JSONObject obj = new JSONObject(); obj.put("systemId",sys.getSystemId()); obj.put("systemName",sys.getSystemName()); arr.add(obj); } java.lang.System.out.println(arr.toString()); //[{"systemId":1,"systemName":"USM"},{"systemId":2,"systemName":"DMS"},{"systemId":3,"systemName":"LOL"}] //后台打印的數據如上,這里的systemId,systemName都要與前台頁面中的相對應 return "system_list"; } }
千萬不要以為只要我后台action中的數據返回的格式是json格式,就可以在前台頁面中直接獲取到然后作顯示,那是不可能的。
前台能接收后台的json格式的數據需要做以下處理:
1.首先你的后台返回的json格式的數據要與你前台頁面下拉框進行顯示的字段內容相對應:如圖:
2.
2.配置struts2返回的結果集視圖 設置type=json(我這里用的是struts2的框架 故以struts2框架舉例)
<action name="listAll*" class="{1}Action" method="listAll{1}">
<result name="system_list" type="json">
<!-- 設置數據的來源從某個數據得到 這里是arr-->
<param name="root">arr</param>
</result>
</action>
3.設置對應action所在的package繼承自json-default
<package name="fums" namespace="/" extends="struts-default,json-default">
4.在后台action中將要返回的數據提供get方法
5.在struts.xml中設置返回數據的格式(見第2步中的代碼,即設置的<param>部分)
注意:
對於ligerForm中的下拉框,可以有id,也可以有comboboxName屬性,這里我的兩者都是同名的,當兩者都存在時,獲取表單中的
下拉框liger.get("systemSelect");,這里的systemSelect對應的是id的值,當不寫id也是可以的,這時候獲取下拉框liger.get("systemSelect")
這里的systemSelect對應的是comboboxName的值,即不寫id屬性,可以根據comboboxName屬性的值來獲取
好啦。。有了這些 就成功啦。。。。啊哈哈
后續添加筆記:
//獲取組件
liger.get("roleName").setValue("設置");
liger.get("roleName").getValue();
//設置ligerui表單元素是否隱藏(可見)
form1.setVisible(["roleId","cTime","uTime","functionIds"],false);
/*設置表單元素隱藏:
1.type="hidden" 則不能使用liger.get(xxx).setValue(xxx);
可以使用$("#xxx").val();賦值
2.使用form.setVisible();是元素不可見,能使用liger.get(xxx).setValue(xxx);*/