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://git.oschina.net/ligerui/LigerUI/
自我感觉jQuery LigerUI 是不错的ui框架,虽然还有一定的局限性和bug,但是还是值得一用的················
jQuery LigerUI ligerGrid 在开发中的应用记录
时间: 2024-11-05 22:00:42