如果你有什么更好的解决方法,在看见这篇博客的时候,希望你能指点小弟,小弟在这先谢过了!
用到 jQuery ui 的部件 有三个分别是:
easyui-layout 、earyui-datagrid 、easyui-dialog(以前都没学过,只能算是边用边学)
实现的功能是(由于是用公司的架构做的,这里不贴图片,我手动画个大概演示就可以了)一个员工点餐管理系统:
主要实现的饭店管理功能就是datagrid 的数据显示,分页,新增 编辑 删除等功能。
主要实现了 选择中间的饭店名称,右边能显示对应饭店的菜单并且实现对应饭店的增加、修改和删除功能。
由于所用的部件都相同,这里我就总结菜单管理,相对别的界面,技术稍加难点!
我首先把我遇到的问题给列出来(你刚刚接触eary ui是否也遇到了这些问题,不防提出来共同讨论):
1.datagrid的属性如何使用的问题:
2.datagrid如何获取后台数据的问题:
3.传值的问题:
4.布局及其分页的问题:
下面我就围绕这四点来展开总结,希望各位给指点下。
第一点 不是什么难点,下载 eary ui 的 API 就可以了(这里不贴) ,有对应的例子(而且讲的非常的详细)请: 官网地址:http://www.jeasyui.com/
第二点 我得详细的总结下,希望圆子里有更好的传值方法给哥们指导指导 :
先贴代码:
我把这张图片再次贴在了这里,是为了大家看着方便,根据图片能更好、快的理解代码(并且做了标注)
接下来我就慢慢的说道说道
做之前我没有认真的考虑,从右往左(现在回想起来都觉得自己SB),我还是把先前的第一遍代码也贴出来,让大家看看(希望大家别犯跟我相同的错误)
搞的bug一大片,浏览器也不兼容,调试1天也没解决。最后我果断从新编写!
下面就讲解我从左往右的思路:
首先我把左边的饭店名称给显示出来 对应代码(如下):
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 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 ,有过错的地方希望大家提出来,有问题请留言!