2014-11-15 總結上周在公司開發所用到的技術，由於是剛找的工作(一個大三實習生)+自己的技術菜，有很多地方都是怎么想就怎么實現的，
如果你有什么更好的解決方法，在看見這篇博客的時候，希望你能指點小弟，小弟在這先謝過了！
用到 jQuery ui 的部件 有三個分別是：
easyui-layout 、earyui-datagrid 、easyui-dialog（以前都沒學過，只能算是邊用邊學）
實現的功能是(由於是用公司的架構做的，這里不貼圖片，我手動畫個大概演示就可以了)一個員工點餐管理系統：
主要實現的飯店管理功能就是datagrid 的數據顯示，分頁，新增 編輯 刪除等功能。
主要實現了 選擇中間的飯店名稱，右邊能顯示對應飯店的菜單並且實現對應飯店的增加、修改和刪除功能。
由於所用的部件都相同，這里我就總結菜單管理，相對別的界面，技術稍加難點！
我首先把我遇到的問題給列出來(你剛剛接觸eary ui是否也遇到了這些問題，不防提出來共同討論)：
1.datagrid的屬性如何使用的問題：
2.datagrid如何獲取后台數據的問題：
3.傳值的問題：
4.布局及其分頁的問題：
下面我就圍繞這四點來展開總結，希望各位給指點下。
第一點 不是什么難點，下載 eary ui 的 API 就可以了(這里不貼) ，有對應的例子(而且講的非常的詳細)請： 官網地址：http://www.jeasyui.com/
第二點 我得詳細的總結下，希望圓子里有更好的傳值方法給哥們指導指導 ：
先貼代碼：
1 @{ 2 Layout = null; 3 } 4 <div id="Menulayout" class="easyui-layout" style="width: 1200px; height: 100%;"> 5 <div data-options="region:'west',title:'店鋪',split:true" style="width: 300px;"> 6 <table id="MenuOrder" style="width: 300px; height: 620px;"> 7 </table> 8 </div> 9 <div data-options="region:'center',title:'菜單列表'" style="border: 0px; padding: 5px; 10 background: #eee; width: 60%; height: 100%"> 11 <table id="MenuList" style="height: 620px; width: 900px; overflow: auto" fit="true"> 12 </table> 13 </div> 14 </div> 15 <!--下面寫個彈窗--> 16 <div id="DIVFrom" class="easyui-dialog" closed="true" style=" background:#FFE4B5; width: 400px; height: 280px; padding: 10px 20px;"> 17 18 <div class="ftitle"> 19 菜單信息 20 <!--新增飯店的信息--> 21 </div> 22 23 24 <form id="EditMenuFrom" method="post"> 25 <div class="fitem"> 26 <label> 菜名：</label> 27 <input name="Menu_name" id="Menu_name" class="easyui-validatebox"/> 28 </div> 29 <div class="fitem"> 30 <label> 價格：</label> 31 <input name="Menu_price" id="Menu_price" class="easyui-validatebox"/> 32 </div> 33 34 <div class="fitem"> 35 <input name="House_name" id="House_name" class="easyui-validatebox" type='hidden' /> 36 </div> 37 <input name="Menu_id" type='hidden' /> 38 </form> 39 </div> 40 <script type="text/javascript" charset="utf-8"> 41 42 function FromDIV(mode,name) { 43 if (mode == 'add') { 44 // alert(name); 45 var House = $("#House_name").val(); 46 $('#EditMenuFrom').form('clear'); 47 $("#House_name").val(name);//往House_name 的input 標簽寫入數據 48 49 $('#DIVFrom').dialog({ closed: false, title: '新增菜單信息' }); 50 $('#MenuList').datagrid('clearSelections'); 51 return; 52 }; 53 54 if (mode == 'update') { 55 var rows = $('#MenuList').datagrid('getSelections'); 56 if (rows.length == 0) { 57 $.messager.alert('錯誤', '請選擇要修改飯店'); 58 $('#MenuList').datagrid('clearSelections'); 59 return; 60 } 61 if (rows.length == 1) { 62 $('#EditMenuFrom').form('clear'); 63 $('#EditMenuFrom').form('load', {//加載本地記錄 64 Menu_id: rows[0].Menu_id, 65 Menu_name: rows[0].Menu_name, 66 Menu_price: rows[0].Menu_price, 67 House_name: rows[0].House_name 68 // House_Menu_id: rows[0].House_Menu_id 69 // isdelete: rows[0].IsDelete string Menu_id, string Menu_name, string Menu_price, string House_Menu_id 70 71 }); 72 $('#DIVFrom').dialog({ closed: false, title: '修改飯店信息' }); 73 $('#Menu_id').datagrid('clearSelections'); 74 } 75 else { 76 $.messager.alert('錯誤', '您選擇了太多的飯店修改'); 77 $('#Menu_id').datagrid('clearSelections'); 78 } 79 return; 80 }; 81 82 }; 83 $('#MenuOrder').datagrid({ 84 url: '/MenuOrderManage/GetOrderName', 85 fitColumns: true, //數據列自適應寬度 86 // nowrap: true, //自動換行 87 border: true, //邊框顯示 88 idField: 'House_id', //唯一主鍵 89 sortName: 'House_id', 90 singleSelect: true, 91 clear: false, 92 columns: [[ 93 { 94 field: 'House_name', 95 title: '飯店名', 96 width: 180 97 } 98 ]] 99 , 100 onDblClickRow: function (rowIndex, rowData) {//在用戶雙擊一行時發生 101 // alert(rowData.House_name); 102 PostSelectValue(rowData.House_name); //-------------//House_name-->name 103 $('#MenuList').datagrid('clearSelections');//清除所選的參數 104 105 // MenuLoad(null); 106 } 107 108 109 }); 110 111 112 /*獲取選擇行*/ 113 function PostSelectValue(name) {//------- 114 // alert(House_name + "house——name"); 115 var rows = $('#MenuOrder').datagrid('getSelections'); 116 if (rows.length == 0) { 117 $.messager.alert('錯誤', '請先選擇行'); 118 // $("#MenuOrder").datagrid({ url: '/MenuOrderManage/AddMenu?House_name=' + rows[0].House_name }); 119 // $('#MenuOrder').datagrid('clearSelections'); 120 return; 121 } 122 else { 123 $("#House_id").val(rows[0].House_id); 124 if (rows.length == 1) { 125 // alert("這里是選擇行的id ==="+rows[0].House_id); 126 // alert(rows[0]).House_id+" "); 127 // $("#MenuOrder").datagrid({ url: '/MenuOrderManage/AddMenu?House_name=' + rows[0].House_name }); 128 // $("#MenuList").datagrid({ url: '/MenuOrderManage/GetMenuOrders?Houshe_name=' + rows[0].House_name }); //向MenuOrderManage/GetMenuOrders對應方法中傳遞House_name參數 129 MenuLoad(rows[0].House_id,name); 130 } 131 return; 132 } 133 } 134 135 136 function MenuLoad(House_id, name) { 137 $("#MenuList").datagrid({ 138 url: '/MenuOrderManage/GetMenuOrders?House_id=' + House_id, //獲取數據的鏈接 139 pagination: true, //是否有分頁欄 140 pageSize: 20, //每頁顯示數據條數 141 pageList: [20, 40, 60, 80], // 初始化每頁顯示條數 142 fitColumns: false, //數據列自適應寬度 143 border: false, //邊框顯示 144 idField: 'Menu_id', //唯一主鍵 145 sortName: 'Menu_id', 146 singleSelect: true, 147 sortOrder: 'asc', 148 toolbar: [{ 149 text: "新增", 150 iconCls: 'icon-add', 151 handler: function () { 152 FromDIV('add', name); 153 // alert(name);//----------------------------------------------------------------- 154 } 155 }, '-', { 156 text: "編輯", 157 iconCls: 'icon-edit', 158 handler: function () { 159 FromDIV('update', name); 160 } 161 }, '-', { 162 text: "刪除", 163 iconCls: 'icon-delete', 164 handler: function () { 165 deptdel(); 166 } 167 }], 168 columns: [[ 169 { 170 field: 'Menu_name', 171 title: '菜名', 172 align: 'center', 173 width: 500, 174 sortable: true 175 }, 176 { 177 field: 'Menu_price', 178 title: '價格', 179 align: 'center', 180 width: 300, 181 sortable: true 182 } 183 ]] 184 185 }); 186 $('#DIVFrom').show().dialog({ 187 title: '標題--', 188 closed: true, 189 modal: true, 190 buttons: [{ 191 text: '保存', 192 handler: function () { 193 // alert("保存"); 194 $('#EditMenuFrom').submit(); 195 $('.validatebox-tip').remove(); 196 } 197 }, { 198 text: '關閉', 199 handler: function () { 200 $('#DIVFrom').dialog({ closed: true }); 201 $('.validatebox-tip').remove(); 202 } 203 }], 204 onClose: function () { //$('#OrderMenumanage_form').find('input').val(''); 205 $('.validatebox-tip').remove(); 206 } 207 }); 208 $('#EditMenuFrom').form({ 209 url: '/MenuOrderManage/AddMenu', 210 success: function (data) { 211 data = $.parseJSON(data); 212 if (data && data.success) { 213 $.messager.alert('提示------', data.message, 'info', function () { 214 $('#EditMenuFrom').find('input').val(''); 215 $('#DIVFrom').dialog({ closed: true }); 216 //alert("進入AddMenu"); 217 deptcls(); 218 }); 219 NewUpdata(); 220 } 221 else { 222 $.messager.alert('提示', data.message); 223 } 224 } 225 }); 226 /*刪除刪除行*/ 227 var deptdel = function () { 228 //getSelections 229 var rows = $('#MenuList').datagrid('getSelections'); 230 if (rows.length == 0) { 231 $.messager.show({ 232 msg: '請選擇要刪除的數據行', 233 title: '提示' 234 }); 235 return; 236 } 237 $.messager.confirm('刪除提示', '您是否刪除選擇數據行數據?', function (r) { 238 if (r) { 239 for (var i = 0; i < rows.length; i++) { 240 $.ajax({ 241 type: "POST", 242 url: "/MenuOrderManage/DelMenuOrder", 243 data: "Menu_id=" + rows[i].Menu_id, 244 success: function (data) { 245 if (data.success == false) { 246 $.messager.alert('提示', data.Message); 247 return; 248 } 249 } 250 }); 251 } 252 $.messager.alert('提示', '刪除成功'); 253 NewUpdata(); 254 } 255 else { 256 $('#MenuList').datagrid('clearSelections'); 257 return; 258 } 259 }); 260 }; 261 262 } 263 /*清除查詢框並刷新表格*/ 264 function NewUpdata(){ 265 $('#MenuList').datagrid('load', {}); 266 //$('#DIVFrom').find('input').val(''); 267 }; 268 269 </script>
我把這張圖片再次貼在了這里，是為了大家看着方便，根據圖片能更好、快的理解代碼(並且做了標注)
接下來我就慢慢的說道說道
做之前我沒有認真的考慮，從右往左(現在回想起來都覺得自己SB)，我還是把先前的第一遍代碼也貼出來，讓大家看看(希望大家別犯跟我相同的錯誤)
搞的bug一大片，瀏覽器也不兼容，調試1天也沒解決。最后我果斷從新編寫！
1 @{ 2 Layout = null; 3 } 4 <div id='fdsfsd' class="easyui-layout" fit="true" border="false"> 5 6 <div data-options="region:'center',title:'餐館列表'" style="padding: 0px;background-color:#CF9814;border:0px" 7 border="false"> 8 <table id="House_id"> 9 </table> 10 </div> 11 </div> 12 13 14 <div id="deptinfo" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;background-color: White" closed="true"> 15 16 <div class="ftitle"> 17 飯店信息 <!--新增飯店的信息--></div> 18 <form id="Ordermanage_form" method="post"> 19 <div class="fitem"> 20 21 <!-- <input id="showunits" class="easyui-combobox" name="strunitid" type="text" />--> 22 23 </div> 24 <div class="fitem"> 25 <label>飯店名稱：</label> 26 <!-- string House_id,string House_name, string House_phone, string House_message, string House_address, string House_Menu_id--> 27 <input name="House_name" id="House_name" class="easyui-validatebox" data-options="required:true" /> 28 </div> 29 30 <div class="fitem"> 31 <label>電話號碼：</label> 32 <input name="House_phone" id="House_phone" class="easyui-validatebox" data-options="required:true" /> 33 </div> 34 <div class="fitem"> 35 <label>詳細地址：</label> 36 <input name="House_address" id="House_address" class="easyui-validatebox" data-options="required:true" /> 37 </div> 38 39 40 41 <input name="House_id" type='hidden' /> 42 </form> 43 </div> 44 45 <script charset="utf-8"> 46 47 /*清除查詢框並刷新表格*/ 48 var deptcls = function () { 49 $('#House_id').datagrid('load', {}); 50 $('#dm_gl').find('input').val(''); 51 }; 52 53 /*查詢*/ 54 var Housetcx = function () { 55 $('#House_id').datagrid('load', { 56 House_name: $('#em_gl').find('[House_name=House_name]').val(), 57 House_id: $('#em_gl').find('[name=House_id]').val() 58 }); 59 }; 60 61 62 var deptinfo = function (mode) { 63 if (mode == 'add') { 64 $('#Ordermanage_form').form('clear'); 65 $('#deptinfo').dialog({ closed: false, title: '新增飯店信息' }); 66 $('#House_id').datagrid('clearSelections'); 67 return; 68 }; 69 70 if (mode == 'update') { 71 var rows = $('#House_id').datagrid('getSelections'); 72 if (rows.length == 0) { 73 $.messager.alert('錯誤', '請選擇要修改飯店'); 74 $('#House_id').datagrid('clearSelections'); 75 return; 76 } 77 if (rows.length == 1) { 78 $('#Ordermanage_form').form('clear'); 79 $('#Ordermanage_form').form('load', {//加載本地記錄 80 House_id: rows[0].House_id, 81 House_name: rows[0].House_name, 82 House_message: rows[0].House_message, 83 House_phone: rows[0].House_phone, 84 House_address: rows[0].House_address 85 // isdelete: rows[0].IsDelete string House_id,string House_name, string House_phone, string House_message, string House_address, string House_Menu_id 86 87 }); 88 $('#deptinfo').dialog({ closed: false, title: '修改飯店信息' }); 89 $('#House_id').datagrid('clearSelections'); 90 } 91 else { 92 $.messager.alert('錯誤', '您選擇了太多的飯店修改'); 93 $('#House_id').datagrid('clearSelections'); 94 } 95 return; 96 }; 97 98 }; 99 100 /*刪除刪除行*/ 101 var deptdel = function () { 102 //getSelections 103 var rows = $('#House_id').datagrid('getSelections'); 104 if (rows.length == 0) { 105 $.messager.show({ 106 msg: '請選擇要刪除的數據行', 107 title: '提示' 108 }); 109 return; 110 } 111 $.messager.confirm('刪除提示', '您是否刪除選擇數據行數據?', function (r) { 112 if (r) { 113 for (var i = 0; i < rows.length; i++) { 114 $.ajax({ 115 type: "POST", 116 url: "/OrderManage/DelOrder", 117 data: "House_id=" + rows[i].House_id, 118 success: function (data) { 119 if (data.success == false) { 120 $.messager.alert('提示', data.Message); 121 return; 122 } 123 } 124 }); 125 } 126 $.messager.alert('提示', '刪除成功'); 127 deptcls(); 128 } 129 else { 130 $('#House_id').datagrid('clearSelections'); 131 return; 132 } 133 }); 134 }; 135 136 $(function () { 137 $("#House_id").datagrid({ 138 url: '/OrderManage/GetOrders', //獲取數據的鏈接 139 //title: '部門列表',// 標題 140 pagination: true, //是否有分頁欄 141 pageSize: 20, //每頁顯示數據條數 142 pageList: [20, 40, 60, 80], // 初始化每頁顯示條數 143 fit: false, //自適應表格大小 144 fitColumns: true, //數據列自適應寬度 145 nowrap: true, //自動換行 146 border: true, //邊框顯示 147 idField: 'House_id', //唯一主鍵 148 sortName: 'House_id', 149 sortOrder: 'asc', 150 singleSelect: true, 151 toolbar: [{ 152 text: "新增", 153 iconCls: 'icon-add', 154 handler: function () { deptinfo('add'); } 155 }, '-', { 156 text: "編輯", 157 iconCls: 'icon-edit', 158 handler: function () { deptinfo('update'); } 159 }, '-', { 160 text: "刪除", 161 iconCls: 'icon-delete', 162 handler: function () { deptdel(); } 163 }], 164 columns: [[ 165 166 { 167 field: 'House_name', 168 title: '飯店名稱', 169 align: 'center', 170 width: 50, 171 sortable: true 172 }, 173 { 174 field: 'House_phone', 175 title: '聯系電話', 176 align: 'center', 177 width: 50, 178 sortable: true 179 }, 180 { 181 field: 'House_address', 182 title: '詳細地址', 183 align: 'center', 184 width: 50, 185 sortable: true 186 187 } 188 189 ]] 190 191 192 }); 193 194 $('#deptinfo').show().dialog({ 195 title: '標題--', 196 closed: true, 197 modal: true, 198 buttons: [{ 199 text: '保存', 200 handler: function () { 201 $('#Ordermanage_form').submit(); 202 $('.validatebox-tip').remove(); 203 } 204 }, { 205 text: '關閉', 206 handler: function () { 207 $('#deptinfo').dialog({ closed: true }); 208 $('.validatebox-tip').remove(); 209 } 210 }], 211 onClose: function () { //$('#Ordermanage_form').find('input').val(''); 212 $('.validatebox-tip').remove(); 213 } 214 }); 215 216 $('#Ordermanage_form').form({ 217 url: '/OrderManage/AddHouse', 218 success: function (data) { 219 data = $.parseJSON(data); 220 if (data && data.success) { 221 $.messager.alert('提示------', data.message, 'info', function () { 222 $('#Ordermanage_form').find('input').val(''); 223 $('#deptinfo').dialog({ closed: true }); 224 deptcls(); 225 }); 226 } 227 else { 228 $.messager.alert('提示', data.message); 229 } 230 } 231 }); 232 233 $('#strdeptname').validatebox({ 234 required: true, 235 tipPosition: 'right' 236 }); 237 238 $('#showunits').combobox({ 239 url: '/UnitsManage/GetUnitList', 240 required: true, 241 editable: false, 242 tipPosition: 'right', 243 width: 150, 244 valueField: 'House_name', 245 textField: 'House_id' 246 }); 247 }); 248 </script>
下面就講解我從左往右的思路：
首先我把左邊的飯店名稱給顯示出來 對應代碼(如下)：
url：... 對應后台控制器
其它的屬性代碼中有詳細的注釋
1 $('#MenuOrder').datagrid({ 2 url: '/MenuOrderManage/GetOrderName', 3 fitColumns: true, //數據列自適應寬度 4 // nowrap: true, //自動換行 5 border: true, //邊框顯示 6 idField: 'House_id', //唯一主鍵 7 sortName: 'House_id', 8 singleSelect: true, 9 clear: false, 10 columns: [[ 11 { 12 field: 'House_name', 13 title: '飯店名', 14 width: 180 15 } 16 ]] 17 , 18 onDblClickRow: function (rowIndex, rowData) {//在用戶雙擊一行時發生 19 // alert(rowData.House_name); 20 PostSelectValue(rowData.House_name); //-------------//House_name-->name 21 $('#MenuList').datagrid('clearSelections');//清除所選的參數 22 23 24 } 25 26 27 });
然后就是 當用戶雙擊 飯店名稱書 得把對應飯店的菜單顯示在 MenuList 表格中 ， 這里用到了 datagrid部件里的事件(onDblClickRow)
在這雙擊的過程中我把所選擇的飯店名稱的值給傳遞給 MenuList 表 所以就用到了 datagrid的兩個參數 rowIndex，rowData(如果你不知道，請轉API)
PostSelectValue方法對應的代碼 ： (這里有個小的轉變 就是PostSelectValue(rowData.House_name) )
rowsData 傳遞的是整個對象，然而我只需要 飯店名稱，所以就 .House_name 了
1 /*獲取選擇行*/ 2 function PostSelectValue(name) {//------- 3 // alert(name + "house——name"); 4 var rows = $('#MenuOrder').datagrid('getSelections'); 5 if (rows.length == 0) { 6 $.messager.alert('錯誤', '請先選擇行'); 9 return; 10 } 11 else { 12 $("#House_id").val(rows[0].House_id); 13 if (rows.length == 1) {14 MenuLoad(rows[0].House_id,name); 15 } 16 return; 17 } 18 }
這里的 PostSelectValue 我把它設置成了不是初始化就能調用，而是雙擊才能調用，這樣可以很好的控制代碼的執行順序
我為什么把MenuLoad(rows[0].House_id,name);的House_id也傳遞過來，是由於我數據庫設置的局限性問題，這里不是論述話題
1 function MenuLoad(House_id, name) { 2 $("#MenuList").datagrid({ 3 url: '/MenuOrderManage/GetMenuOrders?House_id=' + House_id, //獲取數據的鏈接 4 pagination: true, //是否有分頁欄 5 pageSize: 20, //每頁顯示數據條數 6 pageList: [20, 40, 60, 80], // 初始化每頁顯示條數 7 fitColumns: false, //數據列自適應寬度 8 border: false, //邊框顯示 9 idField: 'Menu_id', //唯一主鍵 10 sortName: 'Menu_id', 11 singleSelect: true, 12 sortOrder: 'asc', 13 toolbar: [{ 14 text: "新增", 15 iconCls: 'icon-add', 16 handler: function () { 17 FromDIV('add', name); 18 // alert(name);//----------------------------------------------------------------- 19 } 20 }, '-', { 21 text: "編輯", 22 iconCls: 'icon-edit', 23 handler: function () { 24 FromDIV('update', name); 25 } 26 }, '-', { 27 text: "刪除", 28 iconCls: 'icon-delete', 29 handler: function () { 30 deptdel(); 31 } 32 }], 33 columns: [[ 34 { 35 field: 'Menu_name', 36 title: '菜名', 37 align: 'center', 38 width: 500, 39 sortable: true 40 }, 41 { 42 field: 'Menu_price', 43 title: '價格', 44 align: 'center', 45 width: 300, 46 sortable: true 47 } 48 ]] 49 50 }); 51 $('#DIVFrom').show().dialog({ 52 title: '標題--', 53 closed: true, 54 modal: true, 55 buttons: [{ 56 text: '保存', 57 handler: function () { 58 // alert("保存"); 59 $('#EditMenuFrom').submit(); 60 $('.validatebox-tip').remove(); 61 } 62 }, { 63 text: '關閉', 64 handler: function () { 65 $('#DIVFrom').dialog({ closed: true }); 66 $('.validatebox-tip').remove(); 67 } 68 }], 69 onClose: function () { //$('#OrderMenumanage_form').find('input').val(''); 70 $('.validatebox-tip').remove(); 71 } 72 });
至於新增，修改，刪除 上面給出了代碼。這里就不貼對應的代碼了，為了讓你快速的知道
我把對應定義的方法名稱給解釋一邊 function FromDIV(mode,name) 就是控制 新增，修改的方法。傳遞的 name就是所對應的飯店名稱
這樣只要雙擊了左邊的飯店名稱，右邊的隱藏字段 <input name="House_name" id="House_name" class="easyui-validatebox" type='hidden' />
就可以獲得 飯店的名稱，這樣就可以把菜單新增到對應的飯店中。
其它的傳值方法有 $("#MenuOrder").datagrid({ url: '/MenuOrderManage/AddMenu?House_name=' + rows[0].House_name });
往控制器傳遞進去，然后在把整個 對應的對象數據給拿出來，再傳遞回來(開始我就用這這方法)
1 [HttpPost] 2 public JsonResult AddMenu(string Menu_id, string Menu_name, string Menu_price, string House_name)
{
//職業道德，這里的代碼就不貼了 ， 願博友體諒！
}
今天就寫到這里，以后想到更好的方法會來修正，當你看見這篇博客的時候，希望你也給給建議(不膩賜教)
由於本人是剛剛學 JQuery ，有過錯的地方希望大家提出來，有問題請留言！
今天晚上把上次沒有寫完的給完成 ：
首先我得把我遇到的幾個問題給列出來，這樣更容易讓自己以及讀者快速對文章一目了然！
1、數據庫時間在web頁面顯示的問題
2、獲取datagrid某一列的所有值問題
3、datagrid中的checkbox選擇問題
1 { field: 'clist_time', title: '時間', width: 200, formatter: function (value) { 2 if (value == null || value == '') { 3 return ''; 4 } 5 var dt; 6 if (value instanceof Date) { 7 dt = value; 8 } 9 else { 10 dt = new Date(value); 11 if (isNaN(dt)) { 12 value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //標紅的這段是關鍵代碼，將那個長字符串的日期值轉換成正常的JS日期格式 13 dt = new Date(); 14 dt.setTime(value); 15 } 16 } 17 return dt.format("yyyy-MM-dd hh:mm:ss"); //這里用到一個javascript的Date類型的拓展方法，這個是自己添加的拓展方法，在后面的步驟3定義 18 } 19 } 20 21 22 /** 23 * 時間對象的格式化; 24 */ 25 Date.prototype.format = function (format) { 26 /* 27 * eg:format="YYYY-MM-dd hh:mm:ss"; 28 */ 29 var o = { 30 "M+": this.getMonth() + 1, //month 31 "d+": this.getDate(), //day 32 "h+": this.getHours(), //hour 33 "m+": this.getMinutes(), //minute 34 "s+": this.getSeconds(), //cond 35 "q+": Math.floor((this.getMonth() + 3) / 3), //quarter 36 "S": this.getMilliseconds() //millisecond 37 } 38 39 if (/(y+)/.test(format)) { 40 format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 41 } 42 43 for (var k in o) { 44 if (new RegExp("(" + k + ")").test(format)) { 45 format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); 46 } 47 } 48 return format; 49 };
1 onLoadSuccess: function (data) { 2 var rows = data.rows; 3 var productis = []; 4 var price = 0; 5 $(rows).each(function () { 6 price += this.clist_price;//匯總 7 productis.push(this.clist_price); 8 }); 9 $('#priceId').html(price);
1 field: 'isVisible', checkbox: true , 2 // { field: 'isVisible', 3 title: '選擇飯店' 4 主要是弄了個延遲加載數據，這樣，選擇的就不會不勾上 5 onLoadSuccess:function (data){ 6 var selectRow; 7 if(data){ 8 $.each(data.rows,function (index,item){ 9 10 if(item.isVisible==1){ 11 12 selectRow=index; 13 14 } 15 }); 16 timer = setInterval("handler(" +selectRow + ")", 10); 17 18 } 19 }
這里是開發中用到的視圖 語句
1 select clist_id,menu_name, SUM(clist_price) AS clist_price, 2 GROUP_CONCAT(employee_loginName) AS employee_loginName ,SUM(list_number) 3 AS list_number,clist_time,SUM(employee_number) as employee_number from t_checklist 4 WHERE clist_time BETWEEN (SELECT ADDDATE(now(),INTERVAL -4 HOUR)) AND (SELECT ADDDATE(now(),INTERVAL 0 HOUR)) 5 GROUP BY menu_name
表單提交：
1 CSS 2 3 <form id="Restaurant_form" method="post"> 4 <div class="fitem"> 5 <!-- <input id="showunits" class="easyui-combobox" name="strunitid" type="text" />--> 6 </div> 7 <div class="fitem"> 8 <label> 9 飯店名稱：</label> 10 <!-- string House_id,string House_name, string House_phone, string House_message, string House_address, string House_Menu_id--> 11 <input name="House_name" id="House_name" class="easyui-validatebox" required="required" 12 validtype="" /> 13 </div> 14 <div class="fitem"> 15 <label> 16 電話號碼：</label> 17 <input name="House_phone" id="House_phone" class="easyui-validatebox" data-options="required:true" 18 required="required" validtype="Mobile" /> 19 </div> 20 <div class="fitem"> 21 <label> 22 詳細地址：</label> 23 <input name="House_address" id="House_address" class="easyui-validatebox" data-options="required:true" 24 required="required" /> 25 </div> 26 <input name="House_id" type='hidden' /> 27 </form> 28 29 jQuery 提交給控制器： 30 31 $('#Restaurant_form').form({ 32 url: '/RestaurantManage/editHouse', 33 success: function (data) { 34 data = $.parseJSON(data); 35 if (data && data.success) { 36 $.messager.alert('提示------', data.message, 'info', function () { 37 $('#Restaurant_form').find('input').val(''); 38 $('#DIVformRestaurant').dialog({ closed: true }); 39 newTable(); 40 }); 41 } 42 else { 43 $.messager.alert('提示', data.message); 44 } 45 } 46 });
+
1 function RestaurantSubmit() { 2 $('#DIVformRestaurant').dialog({ 3 title: '', 4 closed: false, 5 modal: true, 6 buttons: [{ 7 text: '保存', 8 handler: function () { 9 $('#Restaurant_form').submit(); 10 $('.validatebox-tip').remove(); 11 } 12 }, { 13 text: '關閉', 14 handler: function () { 15 $('#DIVformRestaurant').dialog({ closed: true }); 16 $('.validatebox-tip').remove(); 17 } 18 }], 19 onClose: function () { //$('#Ordermanage_form').find('input').val(''); 20 $('.validatebox-tip').remove(); 21 } 22 }); 23 }
聲明： 本文來自博客園知鳥博客，轉載請標明出處： www.cnblogs.com/izhiniao