Easyui + jQuery表单提交给 Controller patr1

2014-11-15 总结上周在公司开发所用到的技术，由于是刚找的工作(一个大三实习生)+自己的技术菜，有很多地方都是怎么想就怎么实现的，

如果你有什么更好的解决方法，在看见这篇博客的时候，希望你能指点小弟，小弟在这先谢过了！

用到 jQuery ui 的部件有三个分别是：

easyui-layout 、earyui-datagrid 、easyui-dialog（以前都没学过，只能算是边用边学）

实现的功能是(由于是用公司的架构做的，这里不贴图片，我手动画个大概演示就可以了)一个员工点餐管理系统：

Easyui + jQuery表单提交给 Controller patr1

主要实现的饭店管理功能就是datagrid 的数据显示，分页，新增编辑删除等功能。

Easyui + jQuery表单提交给 Controller patr1

主要实现了选择中间的饭店名称，右边能显示对应饭店的菜单并且实现对应饭店的增加、修改和删除功能。

由于所用的部件都相同，这里我就总结菜单管理，相对别的界面，技术稍加难点！

我首先把我遇到的问题给列出来(你刚刚接触eary ui是否也遇到了这些问题，不防提出来共同讨论)：

1.datagrid的属性如何使用的问题：

2.datagrid如何获取后台数据的问题：

3.传值的问题：

4.布局及其分页的问题：

下面我就围绕这四点来展开总结，希望各位给指点下。

第一点不是什么难点，下载 eary ui 的 API 就可以了(这里不贴) ，有对应的例子(而且讲的非常的详细)请：官网地址：http://www.jeasyui.com/

第二点我得详细的总结下，希望圆子里有更好的传值方法给哥们指导指导：

先贴代码：

  1 @{
  2     Layout = null;
  3 }
  4 <div >
  5     <div data-options="region:'west',title:'店铺',split:true" style="width: 300px;">
  6         <table >
  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 >
 12         </table>
 13     </div>
 14 </div>
 15 <!--下面写个弹窗-->
 16 <div >
 17 
 18      <div class="ftitle">
 19         菜单信息
 20         <!--新增饭店的信息-->
 21     </div>
 22 
 23 
 24     <form >
 25                 <div class="fitem">
 26                    <label> 菜名：</label>
 27                     <input name="Menu_name" />
 28                 </div>
 29                 <div class="fitem">
 30                    <label> 价格：</label>
 31                     <input name="Menu_price" />
 32                 </div>  
 33          
 34                  <div class="fitem"> 
 35                      <input name="House_name"  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>

CSS+ JQuery Eary UI