【LigerUI实战】Grid弹出编辑popup

    最近为分公司的项目做外援，做起了全栈的活。被公司自研架构磨灭的几乎忘掉了其他技能，正好新项目决定重新搭个架构，与同事们讨论过后，决定Spring+MyBatis+SpringMVC+CXF+LigerUI。除了Spring比较熟悉外，其他的还是新接触，不过现在来看，MyBatis和SpringMVC还真是简单易学。不过我的前端知识很有限，干起活来还真是不顺手，所以决定把LigerUI中遇到的问题和解决方案整理整理。

    闲言少叙（好像不少了☻）...
一、效果
    所选课程列是多选，这里决定用弹出框的效果(popup)

二、准备工作
    为了方便，这里用Jfinal搭了个简单的环境，导入ligerUI的js和css就可以了。
    在JSP用引入下面几个文件，为了方便调试，我这里引用的是ligerui.all.js，生产环境用ligerui.min.js就可以了
三、实战
  1.   1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html>
  5 <head>
  6 <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
  7 <title>Insert title here</title>
  8 <linktype="text/css"href="/ligerui/skins/Aqua/css/ligerui-all.css"
  9 rel="stylesheet">
 10 <scripttype="text/javascript"src="/js/jquery-1.4.4.min.js"></script>
 11 <scripttype="text/javascript"src="/ligerui/js/ligerui.all.js"></script>
 12 <scripttype="text/javascript">
 13 //测试数据
 14 var test_data ={
 15 Rows:[{
 16     user_num :'A0001',
 17     user_name :'张三'
 18 },{
 19 user_num :'A0002',
 20     user_name :'李四'
 21 },{
 22 user_num :'A0003',
 23     user_name :'王五'
 24 }],
 25 Total:3
 26 };
 27 //课程数据
 28 var courser_data ={
 29 Rows:[{
 30     courser_id :'B001',
 31     courser_name :'语文'
 32 },{
 33 courser_id :'B002',
 34     courser_name :'数学'
 35 },{
 36 courser_id :'B003',
 37     courser_name :'英语'
 38 },{
 39 courser_id :'B004',
 40     courser_name :'音乐'
 41 },{
 42 courser_id :'B005',
 43     courser_name :'体育'
 44 },{
 45 courser_id :'B006',
 46     courser_name :'美术'
 47 }],
 48 Total:6
 49 };
 50     $(function(){
 51     initGrid();
 52 })
 53 function initGrid(){
 54     $("#grid_first").ligerGrid({
 55     columns :[{
 56     display :'姓名',
 57 name :'user_name',
 58     width :120
 59 },{
 60     display :'学号',
 61 name :'user_num',
 62     width :120
 63 },{
 64     display :'所选课程',
 65 name :'course_id',
 66     textField :'course_name',
 67     width :240,
 68     editor :{
 69     type :'popup',
 70     valueField :'courser_id',
 71     textField :'courser_name',
 72     grid :{
 73     columns :[{
 74     display :'课程名称',
 75 name :'courser_name'
 76 }],
 77     width :360,//指定弹出框宽度
 78 enabledSort :false,
 79     data : $.extend({}, courser_data),
 80     checkbox :true,
 81     usePager :false,
 82     rownumbers :false
 83 }
 84 }
 85 }],
 86     enabledEdit :true,
 87     usePager :false,
 88     checkbox :false,
 89     width :'100%',
 90     heigth :'99',
 91     enabledSort :false,
 92     data : test_data
 93 });
 94 }
 95 </script>
 96 </head>
 97 <body>
 98 <divid="grid_first"></div>
 99 </body>
100 </html>

     

上面的代码是根据官网的例子写的，但是这样运行是有问题的：1.重新选择时取消选择不生效；2.设置宽度不生效。这是本篇主要介绍的内容。
1.解决重新选择时取消选择不生效的问题：
    当取消选择"数学"时，结果并不会生效。
    调试时会发现，选择的数据居然有7个，当然这里面有重复的，三个是第二次选择的三个项，另外四个则是前一次选择的四个项，所以回写时就覆盖掉了取消选择。

    继续调试跟踪，初始选择时，居然会运行12次，也就是初始化了两遍，原因应该就在这了。
    追踪到调用位置，如果frozen=true时，_fillGridBody()会执行两遍。
    解决:
修改一下代码，在editor中增加frozen:false就可以了
  1.  1 editor : {
 2     type : 'popup',
 3     valueField : 'courser_id',
 4     textField : 'courser_name',
 5     grid : {
 6     columns : [{
 7     display : '课程名称',
 8 name : 'courser_name'
 9     }
10     ],
11     width : 360, //指定弹出框宽度
12 enabledSort : false,
13     data : $.extend({}, courser_data),
14     checkbox : true,
15     usePager : false,
16     rownumbers : false,
17 frozen : false
18     }

     

2.解决指定宽度不生效的问题
    找到源码ligerui.all.js第16546行，可以看到这里并未获取参数中传过来的width,height属性值，为了使用方便只好修改一下源代码，指定grid的width和height即为Dialog的宽和高。
  1.  1 if(!g.popupFn){
 2 var options ={
 3     grid : gridOptions,
 4     condition : p.condition,
 5     valueField : p.valueField,
 6     textField : p.textField,
 7     split : p.split,
 8     lastSelected : getLastSelected(),
 9     onSelect :function(e){
10 if(g.trigger('select', e)==false)
11 return;
12 if(p.grid.checkbox){
13     g.addValue(e.value, e.text);
14     g.removeValue(e.remvoeValue, e.remvoeText);
15 }else{
16     g.setValue(e.value);
17     g.setText(e.text);
18 }
19     g.trigger('selected', e);
20 },
21     selectInit :function(rowdata){
22 var value = g.getValue();
23 if(!value)
24 returnfalse;
25 if(!p.valueField ||!rowdata[p.valueField])
26 returnfalse;
27 return $.inArray(rowdata[p.valueField].toString(), value.split(p.split))!=-1;
28 }
29 };
30 //modify by Rhys Lee 用于支持设置弹出框高度和宽度
31 if(gridOptions.width){
32     options.width = gridOptions.width;
33 }
34 if(gridOptions.height){
35     options.height = gridOptions.height;
36 }
37     //modify end
38     g.popupFn = $.ligerui.getPopupFn(options);
39 }

     

    第一次写博客，肯定有不好的地方，希望大家指正。(请轻拍)
 
 



posted @ 2015-11-15 17:03  Rhys  阅读(2120)  评论(0)  编辑  收藏  举报