jQuery LigerUI ligerGrid 在開發中的應用記錄

標籤：style   http   color   os   io   資料   for   cti   

 var  byNumberSwitch = ""; var  intervalSwitch = "";          //間隔設定方法        var dayEditor = { type: ‘spinner‘, minValue: 0,onChanged:function(e){         //提交資料   var setNumber = e.value;//編輯結果   var mendianID = e.record.mendianID;//編輯門店編號   //判斷設定資料沒有改變，或者為空白時跳出方法   if(intervalSwitch ==setNumber || setNumber ==‘‘){    liger.get("maingrid").updateCell(‘intervalSwitch‘, intervalSwitch, e.record);    liger.get("maingrid").isDataChanged = false;    return;   }         //將擷取的資料提交到後台   $.ligerDialog.waitting(‘正在儲存中,請稍候...‘);   $.post(‘show/mendianAction_set.action‘,{setNumber:setNumber,deptid:mendianID},function(data){    var rtnflage = data.map.flage;    //返回失敗標誌  還原修改資料     if(rtnflage == 1){     liger.get("maingrid").updateCell(‘intervalSwitch‘, intervalSwitch, e.record);     liger.get("maingrid").isDataChanged = false;    }    var mssage = data.map.msg;    $.ligerDialog.closeWaitting();             // $.ligerDialog.tip({  title: ‘提示資訊‘,content:‘資料已經提交成功！‘+e.value });             $.ligerDialog.alert(mssage, ‘提示‘,‘success‘);   },‘json‘);  } };  //開關下拉框編輯資料  var openData = [{ intervalSwitch: 1, text: ‘開‘ }, { intervalSwitch: 0, text: ‘關‘}];  //開關編輯函數  var openEditor = { type: ‘select‘, data: openData, valueField: ‘intervalSwitch‘,onChanged:function(e){   //提交資料   var flage = e.value;//編輯資料   //判斷設定資料沒有改變，或者為空白時跳出方法   if(byNumberSwitch ==flage || flage ==‘‘){    liger.get("maingrid").updateCell(‘byNumberSwitch‘, byNumberSwitch, e.record);    liger.get("maingrid").isDataChanged = false;    return;   }   //將擷取的資料提交到後台   $.ligerDialog.waitting(‘正在儲存中,請稍候...‘);   var mendianID = e.record.mendianID;//編輯門店編號   $.post(‘show/mendianAction_open.action‘,{flage:flage,deptid:mendianID},function(data){    var rtnflage = data.map.flage;    //返回失敗標誌  還原修改資料     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: ‘提示資訊‘,content:‘資料已經提交成功！‘+e.value });             $.ligerDialog.alert(mssage, ‘提示‘,‘success‘);   },‘json‘);}  }    //開關頁面渲染函數  function renderfun(rowdata,index,value){   if(value==1){    return ‘<span style="color: blue; font-weight: bold;">開 </span><img src="images/Setting.png" style="text-align:right; margin-left:10%; height:80%;width:40%;"/>‘;//"開";   }else{    return ‘關<img src="images/Setting.png" style="text-align:right; margin-left:15%; height:80%;width:40%;"/>‘;   }  }    //間隔頁面渲染函數  function setrenderfun(rowdata,index,value){   if(value >0){    return ‘<span style="color: blue; font-weight: bold;">‘+value+‘</span><img src="images/Settings.png" style="text-align:right; margin-left:10%;height:50%;width:30%;"/>‘;   }else{    return ""+value+‘<img src="images/Settings.png" style="text-align:right; margin-left:25%;  height:50%;width:30%;"/>‘;   }  }  //重新整理函數  var loaddata = function(){         var key = $("#txtKey").val();       if(key !=‘請輸入關鍵字‘){      grid.options.parms={"key":key};       }else{        if(grid){//對象存在的情況下         grid.options.parms={"key":""};        }       }        }  //擷取編輯前的資料  var beforeEdit = function(e){   byNumberSwitch = e.record.byNumberSwitch;   intervalSwitch = e.record.intervalSwitch  }  $.ligerDefaults.GridString.isContinueByDataChanged = ‘表格式資料有被改變,確認儲存後繼續?‘;  //表格列表定義        var grid = $("#maingrid").ligerGrid({         url:"show/mendianAction_list.action",         parms:{"key":""},            columns: [                { display: ‘門店編號‘, name: ‘mendianID‘, width: ‘10%‘,align:‘left‘,isSort:true},                { display: ‘門店名稱‘, name: ‘mendianName‘,textField:‘mendianName‘, width: ‘17%‘,align:‘left‘,isSort:true},                { display: ‘門店地址‘, name: ‘mendianAdd‘, width: ‘27%‘,align:‘left‘,isSort:true},                { display: ‘門店排號資訊‘, columns: [                    { display: ‘大桌‘, name: ‘byNumberOfBig‘, width: ‘12%‘,align:‘left‘,isSort:true},                    { display: ‘中桌‘, name: ‘byNumberOfMiddle‘, width: ‘12%‘,align:‘left‘,isSort:true},                    { display: ‘小桌‘, name: ‘byNumberOfLittle‘, width: ‘12%‘,align:‘left‘,isSort:true}                ]},    { display: ‘網路排號設定‘, columns: [                    { display: ‘開關設定‘, name: ‘byNumberSwitch‘, width: ‘4%‘, align: ‘left‘, editor: openEditor,type:‘int‘,render:renderfun,isSort:true},                    { display: ‘間隔設定‘, 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, 25, 30],            pageSize:20,onLoadData:loaddata,onBeforeEdit:beforeEdit//,rowHeight:44        });  //隱藏提示框  $("#pageloading").hide();  //搜尋函數  function f_search(){    var key = $("#txtKey").val();    if(key !=‘請輸入關鍵字‘){     grid.loadServerData({"key":key});    }else{     grid.loadServerData({"key":""});    }        }

官方API:http://api.ligerui.com/

示範地址：http://www.ligerui.com/

源碼下載：http://git.oschina.net/ligerui/LigerUI/

自我感覺jQuery LigerUI 是不錯的ui架構，雖然還有一定的局限性和bug,但是還是值得一用的················