var byNumberSwitch = "; var intervalswitch = " "; //Interval Setting Method var dayeditor = { type: ' spinner ', minvalue: 0,onchanged:function (e) { //Submit Data var setnumber = e.value ;//Edit Result var mendianid = e.record.mendianid;//Edit Store number // Determine if the settings data has not changed, or is an empty-time bounce Method if (intervalswitch ==setnumber | | setnumber == ') { liger.get ("Maingrid"). Updatecell (' Intervalswitch ', Intervalswitch, e.record); liger.get ("Maingrid") .isdatachanged = false; return; } // Submits the acquired data to the background $.ligerdialog.waitting (' Saving, please wait ... '); $.post (' Show/mendianaction_set.action ', {Setnumber:setnumber,deptid:mendianid}, function (data) { var rtnflage = data.map.flage; // Return failure flag Restore modified data if (RTNFLAGE&NBSP;==&NBSP;1) { liger.get ("Maingrid"). Updatecell (' Intervalswitch ', intervalswitch, e.record); liger.get ("Maingrid") .isdatachanged = false; } var mssage = data.map.msg; $.ligerdialog.closewaitting (); // $.ligerdialog.tip ({ title: ' hint message ', content: ' Data has been submitted successfully! ' +e.value }); $. Ligerdialog.alert (mssage, ' hint ', ' success '); }, ' json '); &NBSP;&NBSP;}&NBSP;};&NBSP;&Nbsp;//switch drop-down box edit data var openData = [{ intervalSwitch: 1, text: ' open ' }, { intervalSwitch: 0, text: ' off '}]; //switch edit function var openeditor = { type: ' select ', data: opendata, valuefield: ' Intervalswitch ', Onchanged:function (e) { //submit data var flage = e.value;//Edit the data //determine if the settings data has not changed, or is an empty time out method if (bynumberswitch ==flage | | flage == ') { liger.get ("Maingrid"). Updatecell (' Bynumberswitch ', Bynumberswitch, e.record); liger.get ("Maingrid") .isdatachanged = false; &NBSP;&NBSP;&NBSP;&NBSP;RETURN;&NBSP;&NBSP;&NBSP;}&NBSP;&NBSP;&NBSP;//submits the acquired data to the background $. Ligerdialog.waitting (' Save now, please wait ... '); var mendianid = e.record.mendianid;// Edit Store number $.post (' Show/mendianactIon_open.action ', {flage:flage,deptid:mendianid},function (data) { var rtnflage = data.map.flage; //return failure flag Restore modified data if ( rtnflage == 1) { liger.get ("Maingrid"). Updatecell (' ByNumberSwitch ', bynumberswitch, e.record); liger.get ("Maingrid"). isDataChanged = false; } var mssage = data.map.msg; $.ligerdialog.closewaitting (); //$.ligerdialog.tip ({ title: ' hint message ', content: ' Data has been submitted successfully! ' +e.value }); $. Ligerdialog.alert (mssage, ' hint ', ' success '); }, ' json ');} } //Switch Page rendering function function renderfun (rowdAta,index,value) { if (value==1) { return ' <span style= ' color: blue; font-weight: bold; " > Open </span> ';//"open"; }else{ return ' off '; } } //interval page render function function Setrenderfun (rowdata,index,value) { if (value >0) { return ' <span style= "color: blue; font-weight: bold;" > ' +value+ ' </span> '; }else{ return "" +value+ ' '; } } //refresh function var loaddata = function () { var key = $ ("#txtKey"). Val (); if (key != ' Please enter keywords ') { grid.options.parms={ "Key": Key}; }else{ if ( GRID) {// grid.options.parms={"key" in case the object exists: "}; } } } //get pre-edited data var beforeedit = function (e) { byNumberSwitch = e.record.byNumberSwitch; intervalSwitch = E.record.intervalswitch } $.ligerdefaults.gridstring.iscontinuebydatachanged = ' table data has been changed, confirm to continue after saving? '; //table List Definition var grid = $ ("#maingrid"). Ligergrid ({ url: "show/mendianaction_list.action", parms:{"key": "}, columns: [ { display: ' Store number ', name: ' Mendianid ', width: ' 10% ', align: ' left ',issort:true}, { display: ' Store name ', name: ' Mendianname ', TextField: ' Mendianname ', width: ' 17% ', align: ' left ',issort:true}, &nbSp { display: ' Store address ', name: ' mendianadd ', width: ' 27% ', align: ' Left ', issort:true}, { display : ' Store automatic arranging information ', columns: [ { display: ' Big table ', name: ' Bynumberofbig ', width: ' 12% ', align: ' left ',issort:true}, { display: ' middle table ', name: ' Bynumberofmiddle ', width: ' 12% ', align: ' left ',issort:true}, { display: ' small table ', name: ' bynumberoflittle ', width: ' 12% ', align: ' left ',issort:true} ]}, { display: ' network automatic arranging settings ', columns: [ { display: ' Switch settings ', name: ' Bynumberswitch ', width: ' 4% ', align: ' left ', editor: openeditor,type: ' int ',render:renderfun,issort:true}, { display: ' interval settings ', name: ' intervalswitch ', width: ' 4% ', align: ' Left ', type: ' int ', editor: dayeditor,render:setrenderfun,issort:true} ]} ], //data : { rows: data}, height: ' 98% ', Rownumbers: true,usepager:true, enablededit:true,dataaction: "Local", pagesizeoptions:[15, 20, &NBSP;25,&NBSP;30],&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;PAGESIZE:20, onloaddata:loaddata,onbeforeedit:beforeedit//,rowheight:44 }); //Hide the Cue box $ ("#pageloading"). Hide (); //search function function f_search () { var key = $ ("#txtKey"). Val (); if (key != ' Please enter the keyword ') { grid.loadserverdata ({"Key": Key}); }else{ grid.loadserverdata ({"Key": ""}); } }
Official api:http://api.ligerui.com/
Demo Address: http://www.ligerui.com/
SOURCE Download: http://git.oschina.net/ligerui/LigerUI/
Self-feeling jquery Ligerui is a good UI framework, although there are some limitations and bugs, but it is worth the use of ····· ········· ··