CRM管理系統(二)上----easyui+Datagrid
阿新 • • 發佈：2017-07-24
round title val 原因 cnblogs 標記 準備 and isp
今天終於把數據字典模塊做出來了,前前後後大概做了兩天時間,修改和整理又用了兩天時間,在這個模塊中主要用的是easyui的DataGrid插件,同時通過自己在網上看文檔,查問題,整理了一下DataGrid的運用,自己編碼的過程中反復斟酌,一共修改了兩次,三套不同的版本,今天全部給貼出來
大體的界面如下：
這裏先附上easyui DataGrid插件的官方文檔地址：
http://www.jeasyui.net/plugins/183.html
建議如果學習的話,還是先看下官方文檔,博主自己也在官方文檔上折騰了好久,如果官方文檔上有什麽東西寫的不太清楚,可以百度,這篇文章可以用作參考；
下面是第一版本的代碼,如文章上面所說,主要是通過Datagrid插件實現數據字典的展示,修改,刪除等功能
easyUI有三種方式創建Datagrid
1.通過HTML定義行,列,數據
<table class="easyui-datagrid"> <thead> <tr> <th data-options="field:‘code‘">Code</th> <th data-options="field:‘name‘">Name</th> <th data-options="field:‘price‘">Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> </tbody> </table>
2.通過table標記創建數據表格
<table class="easyui-datagrid"style="width:400px;height:250px" data-options="url:‘datagrid_data.json‘,fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:‘code‘,width:100">Code</th> <th data-options="field:‘name‘,width:100">Name</th> <th data-options="field:‘price‘,width:100,align:‘right‘">Price</th> </tr> </thead> </table>
3.通過JavaScript創建
<table id="dg"></table> $(‘#dg‘).datagrid({ url:‘datagrid_data.json‘, columns:[[ {field:‘code‘,title:‘Code‘,width:100}, {field:‘name‘,title:‘Name‘,width:100}, {field:‘price‘,title:‘Price‘,width:100,align:‘right‘} ]] });
第一個版本,博主用的就是JavaScript方式創建的
var url = $("#url").val(); var lastIndex = null; var content = null; $(‘#dg‘).datagrid({
//設置為 true，則會自動擴大或縮小列的尺寸以適應網格的寬度並且防止水平滾動。 fitColumns:true, //關閉自動行高 autoRowHeight:false,
//設置為 true，則把行條紋化。（即奇偶行使用不同背景色） striped:true, //提示消息 loadMsg:‘加載中‘,
//設置為 true，則只允許選中一行。 singleSelect: true, url:url+‘init/AllSjzdfl.do‘, loadFilter:loadFilter, columns:[[ {field:‘sjzdflId‘,title:‘序號‘,align:‘center‘,styler:function(value,row,index){ return ‘width:10%‘; }}, {field:‘sjzdflName‘,title:‘數據字典分類‘,align:‘center‘,editor:‘text‘,styler:function(value,row,index){ return ‘width:70%‘; }}, {field:‘sjzdflstatus‘,title:‘啟用‘,align:‘center‘,styler:function(value,row,index){ return ‘width:10%‘; }, editor:{ type:‘checkbox‘, options:{ on: ‘p‘, off: ‘f‘ } }}, {field:‘action‘,title:‘操作‘,align:‘center‘,styler:function(value,row,index){ return ‘width:10%‘; }, formatter:function(value,row,index){ if (row.editing){ var s = ‘<a href="#" onclick="saverow(‘+index+‘)">保存</a> ‘; var c = ‘<a href="#" onclick="cancelrow(‘+index+‘)">取消</a>‘; return s+c; } else { var e = ‘<a href="#" onclick="editrow(‘+index+‘)">編輯</a> ‘; var d = ‘<a href="#" onclick="deleterow(‘+index+‘)">刪除</a>‘; return e+d; } } } ]], //開始編輯 onBeforeEdit:function(index,row){ row.editing = true; content=row.sjzdflName; $(‘#dg‘).datagrid(‘refreshRow‘, index); }, //保存 onAfterEdit:function(index,row){ if(Update(row)===1){ alert("修改成功"); row.editing = false; lastIndex = null; $(‘#dg‘).datagrid(‘refreshRow‘, index); }else{ alert("修改失敗"); row.editing = false; lastIndex = null; row.sjzdflName=content; $(‘#dg‘).datagrid(‘refreshRow‘, index); } content=null; }, //取消 onCancelEdit:function(index,row){ row.editing = false; lastIndex = null; $(‘#dg‘).datagrid(‘refreshRow‘, index); }, onCheck:function(){ console.log("選定"); }, onUncheck:function(){ console.log("取消選定"); } }); function saverow(rowIndex){ $("#dg").datagrid(‘endEdit‘,rowIndex); } function editrow(rowIndex){ //判斷是否有編輯行 if(lastIndex!=null){ $("#dg").datagrid(‘cancelEdit‘,lastIndex); } //保存被編輯行的下標 lastIndex = rowIndex; $("#dg").datagrid(‘beginEdit‘,rowIndex); } function cancelrow(rowIndex){ $("#dg").datagrid(‘cancelEdit‘,rowIndex); } function Update(row){ var temp = 0; $.ajax({ type:"post", url:url+"Update/sjzdfl.do", timeout:30000,//30秒 async:false,//註意 此時必須關閉ajax的異步請求,否則更新成功但是前臺還是會彈出修改失敗,因為ajax是異步的 data:"sjzdflId="+row.sjzdflId+"&sjzdflName="+row.sjzdflName+"&sjzdflstatus="+row.sjzdflstatus, success:function(data){ temp=data; }, error:function(data){ temp=0; } }); return temp; } //數據過濾 function loadFilter(data){ var value = { total:28, rows:[] }; var x = 0; for(var i in data){ value.rows[x]=data[i]; x++; } console.log(value); return value; }
博主放棄第一種方式並不是因為第一種方式不好,反而,第一種方式是一個不錯的創建形式,所有的html部分都可以交給框架完成,but！！對於每列寬度的百分比控制,似乎不是那麽好調整的,所以博主在這上面折騰了一晚上以後決定放棄,熬夜傷身(腎)
下面是第二版本的代碼
可以看出,博主第二版本和第一版本的區別就是在於,第二版本Datagrid部分的創建方式變成了html方式
其他內容變化不大,變成html的方式創建的根本原因就是暫時沒有想到其他方式來把列的寬度設置成百分比
然而就在我滿心歡喜的完成一個頁面的編碼,準備開始第二個頁面的編碼時候..我發現除了,TMD!!
除了頁面的內容不一致以外,HTML部分沒有大的變化,js部分也沒有大的變化,然而就是因為換了個頁面,我就要把所有的html AND JS全部重寫一遍,對於一個懶人來說,重復寫一樣的代碼是在浪費時間,所以博主決定,把頁面的JS部分抽出來單獨作為一個JS文件引入,並在JS內判斷,當前的頁面需要添加哪些內容,具體的編碼如下
var url = $("#url").val()+$("#uri").val(); var lastIndex = null; var content = null; $(‘#dg‘).datagrid({ //開始編輯 onBeforeEdit:function(index,row){ row.editing = true; if(row.sjzdflName!=undefined){ content=row.sjzdflName; } if(row.Content!=undefined){ content=row.Content; } $(‘#dg‘).datagrid(‘refreshRow‘, index); }, //保存 onAfterEdit:function(index,row){ if(row.Content!=undefined&&row.SjzdflId!=undefined&&row.SjzdxxId!=undefined){ if(row.Content==content){ row.editing = false; $(‘#tb‘).datagrid(‘refreshRow‘,index); return; } Operation(url,"sjzdflId="+row.SjzdflId+"&sjzdxxId="+row.SjzdxxId+"&sjzdxxmc="+row.Content,row,index); } if(row.sjzdflName!=undefined&&row.sjzdflId!=undefined){ if(row.sjzdflName==content){ row.editing = false; $(‘#tb‘).datagrid(‘refreshRow‘,index); return; } Operation(url,"sjzdflId="+row.sjzdflId+"&sjzdflName="+row.sjzdflName+"&sjzdflstatus="+row.sjzdflstatus,row,index); } content=null; }, //取消 onCancelEdit:function(index,row){ row.editing = false; lastIndex = null; $(‘#dg‘).datagrid(‘refreshRow‘, index); } }); function saverow(rowIndex){ $("#dg").datagrid(‘endEdit‘,rowIndex); } function editrow(rowIndex){ //判斷是否有編輯行 if(lastIndex!=null){ $("#dg").datagrid(‘cancelEdit‘,lastIndex); } //保存被編輯行的下標 lastIndex = rowIndex; $("#dg").datagrid(‘beginEdit‘,rowIndex); } function cancelrow(rowIndex){ $("#dg").datagrid(‘cancelEdit‘,rowIndex); } function Update(url,datas){ console.log(url+datas); var temp = 0; $.ajax({ type:"post", url:url, timeout:30000,//30秒 async:false,//註意 此時必須關閉ajax的異步請求,否則更新成功但是前臺還是會彈出修改失敗,因為ajax是異步的 data:datas, success:function(data){ temp=data; }, error:function(data){ alert("失敗"); temp=0; } }); return temp; } //數據過濾 function loadFilter(data){ var value = { total:28, rows:[] }; var x = 0; for(var i in data){ value.rows[x]=data[i]; x++; } return value; } //操作 function format(value,row,index){ if (row.editing){ var s = ‘<a href="#" onclick="saverow(‘+index+‘)">保存</a> ‘; var c = ‘<a href="#" onclick="cancelrow(‘+index+‘)">取消</a>‘; return s+c; } else { var e = ‘<a href="#" onclick="editrow(‘+index+‘)">編輯</a> ‘; var d = ‘<a href="#" onclick="deleterow(‘+index+‘)">刪除</a>‘; return e+d; } } function Operation(url,data,row,index){ if(Update(url,data)===1){ alert("修改成功"); row.editing = false; lastIndex = null; $(‘#dg‘).datagrid(‘refreshRow‘, index); }else{ alert("修改失敗"); row.editing = false; lastIndex = null; row.sjzdflName=content; $(‘#dg‘).datagrid(‘refreshRow‘, index); } }
說白了,就是把JS部分提取出來,然後在點擊保存的時候,通過判斷當前是哪個頁面,給AJAX方法傳入對應的URL和數據
上面就是博主的第二版本的WEB頁面部分,待會博主還會再另寫一篇後臺部分
整個項目的地址還是http://115.159.152.20:8081/MyCRM/
CRM管理系統(二)上----easyui+Datagrid