在家没事干，整理个Controller+Eary UI patr1

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

 

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

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

 

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

 

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

 

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

 

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

 

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

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

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

 

3.传值的问题：

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

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

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

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

      先贴代码：

CSS+ JQuery Eary UI

我把这张图片再次贴在了这里，是为了大家看着方便，根据图片能更好、快的理解代码(并且做了标注)

 

接下来我就慢慢的说道说道   

   做之前我没有认真的考虑，从右往左(现在回想起来都觉得自己SB)，我还是把先前的第一遍代码也贴出来，让大家看看(希望大家别犯跟我相同的错误)

   搞的bug一大片，浏览器也不兼容，调试1天也没解决。最后我果断从新编写！

 

有bug的代码 混乱

 

下面就讲解我从左往右的思路：

 首先我把左边的饭店名称给显示出来 对应代码(如下)：

 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也传递过来，是由于我数据库设置的局限性问题，这里不是论述话题

function MenuLoad(House_id, name)

 

 

至于新增，修改，删除  上面给出了代码。这里就不贴对应的代码了，为了让你快速的知道 

我把对应定义的方法名称给解释一边  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   ，有过错的地方希望大家提出来，有问题请留言！