jQuery LigerUI ligerGrid 在开发中的应用记录

 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,但是还是值得一用的...........