Eary UI + jQuery表单提交 给 Controller patr1
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