The application record of JQuery Ligerui Ligergrid in development

 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 ····· ········· ··