for a list of the mobile frame, ligerui also has carried on the package, can be directly used in demo, but that is directly on the page static initialization data, such as how to get back? After

has some experience of using some components of ligerui, it is very similar to get data from the background and display on the front page. It's not hard.

means sending requests directly to the background in the ligerui component directly by using its URL attribute, or sending a Ajax request individually, after obtaining the data, it gets the component and sets its data attribute. Hey。。

directly uses the URL attribute to send the request.

 < front page: script type= "text/javascript" > VAR box1 box2; $(function () {/ / initialize 8 listbox box1 = $("#listbox1") (.LigerListBox true isMultiSelect: true {isShowCheckBox:, height:, 140, sent to the background / / request url:'${baseURL}/getDeviceByAll.action'}); box2 = $("#listbox2").LigerListBox ({isShowCheckBox: true, isMultiSelect: true, height: 140, VAR}); tempData2 = [{id:1, text: "AA"}, {id:2, text: "BB" //button}]; click event $("#btn1") (.Click (function) {setListBoxData (tempData2);});}); function setListBoxData (tempData2) {/ / seemingly only via ID removed by removeItems The effect can be achieved for the 1,2 / / such as the removal of ID and then added to the left for (VaR i=0; i< tempData2.length; i++) {box1.removeItem (tempData2[i].id) box2.addItems (tempData2);};} //===========listbox four button click function moveToLeft1 =========== correlation function () {var = box2.getSelectedItems (selecteds); if (selecteds ||!! selecteds.length) return; box2.removeItems (selecteds); box1.addItems (selecteds) function (moveToRight1);} {var = box1.getSelectedItems (selecteds); if (selecteds ||!! selecteds.length) return; box1.removeItems (selecteds); box2.addItems (selecteds) function (moveAllToLeft1);} var {selecteds = box2.data; if (selecteds ||!! selecteds.length return (selecteds)); box1.addItems; box2 .removeItems (selecteds) function (moveAllToRight1);} var {selecteds = box1.data; if (selecteds ||!! selecteds.length) return; box2.addItems (selecteds); box1.removeItems (selecteds); < /script>}; < style type = "text/css" >.Middle input {display: block; width:30px; margin:2px; <}; /style> < /head> < body> < div> < div style= float:left; font-size:15px; width:150px; text-align: center > Support Devices:< /div> < div style= margin:4px; float:left; > < div "id=" listbox1 "> < /div> < /div> < div style= margin:4px; float:left; > < input" type= "button" onclick= "(moveToLeft1)" value= "< /> < input" type= "button" onclick= "(moveToRight1)" Value= > /> < input "type=" button "onclick=" (moveAllToLeft1) "value=" < < /> < input "type=" button "onclick=" (moveAllToRight1) "value=" > > /> < /div> < div style= margin:4px; float:left; > < div "id=" listbox2 "> < /div> < /div> < /div> < input type=" button "value=" click "id=" BTN1 "> < /body> 

 private JSONArray jsonArray background action:

JSONArray getJsonArray (public; {return jsonArray}); public String (getDeviceByAll) throws Exception{List< Device> deviceList = deviceService.getAll; jsonArray = new (Device.class) JSONArray (for (Device device:devi); CeList obj = new JSONObject) {JSONObject (//listbox); the corresponding data format to text, ID field obj.put ("Id") (device.getDevId); obj.put ("text") (device.getDevName); jsonArray.add (obj);} return SUCCESS; pre>

}

# "screenshots: (mobile map omitting the effect left and right)

 src=

in check the data, click the "click" button, the drawings are as follows

in the removal process, started using removeItems () method, but the test does not remove, the use of removeItem () method, according to the ID to remove..


This concludes the body part