【LigerUI实战】Grid弹出编辑popup
最近为分公司的项目做外援，做起了全栈的活。被公司自研架构磨灭的几乎忘掉了其他技能，正好新项目决定重新搭个架构，与同事们讨论过后，决定Spring+MyBatis+SpringMVC+CXF+LigerUI。除了Spring比较熟悉外，其他的还是新接触，不过现在来看，MyBatis和SpringMVC还真是简单易学。不过我的前端知识很有限，干起活来还真是不顺手，所以决定把LigerUI中遇到的问题和解决方案整理整理。
闲言少叙（好像不少了☻）...
一、效果
所选课程列是多选，这里决定用弹出框的效果(popup)
二、准备工作
为了方便，这里用Jfinal搭了个简单的环境，导入ligerUI的js和css就可以了。
在JSP用引入下面几个文件，为了方便调试，我这里引用的是ligerui.all.js，生产环境用ligerui.min.js就可以了
三、实战
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="/ligerui/skins/Aqua/css/ligerui-all.css"
rel="stylesheet">
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/ligerui/js/ligerui.all.js"></script>
<script type="text/javascript">
//测试数据
var test_data = {
Rows : [ {
user_num : 'A0001',
user_name : '张三'
}, {
user_num : 'A0002',
user_name : '李四'
}, {
user_num : 'A0003',
user_name : '王五'
} ],
Total : 3
};
//课程数据
var courser_data = {
Rows : [ {
courser_id : 'B001',
courser_name : '语文'
}, {
courser_id : 'B002',
courser_name : '数学'
}, {
courser_id : 'B003',
courser_name : '英语'
}, {
courser_id : 'B004',
courser_name : '音乐'
}, {
courser_id : 'B005',
courser_name : '体育'
}, {
courser_id : 'B006',
courser_name : '美术'
} ],
Total : 6
};
$(function() {
initGrid();
})
function initGrid() {
$("#grid_first").ligerGrid({
columns : [ {
display : '姓名',
name : 'user_name',
width : 120
}, {
display : '学号',
name : 'user_num',
width : 120
}, {
display : '所选课程',
name : 'course_id',
textField : 'course_name',
width : 240,
editor : {
type : 'popup',
valueField : 'courser_id',
textField : 'courser_name',
grid : {
columns : [ {
display : '课程名称',
name : 'courser_name'
} ],
width : 360,//指定弹出框宽度
enabledSort : false,
data : $.extend({}, courser_data),
checkbox : true,
usePager : false,
rownumbers : false
}
}
} ],
enabledEdit : true,
usePager : false,
checkbox : false,
width : '100%',
heigth : '99',
enabledSort : false,
data : test_data
});
}
</script>
</head>
<body>
<div id="grid_first"></div>
</body>
</html>
上面的代码是根据官网的例子写的，但是这样运行是有问题的：1.重新选择时取消选择不生效；2.设置宽度不生效。这是本篇主要介绍的内容。
1.解决重新选择时取消选择不生效的问题：
当取消选择"数学"时，结果并不会生效。
调试时会发现，选择的数据居然有7个，当然这里面有重复的，三个是第二次选择的三个项，另外四个则是前一次选择的四个项，所以回写时就覆盖掉了取消选择。
继续调试跟踪，初始选择时，居然会运行12次，也就是初始化了两遍，原因应该就在这了。
追踪到调用位置，如果frozen=true时，_fillGridBody()会执行两遍。
解决:
修改一下代码，在editor中增加frozen:false就可以了
editor : { type : 'popup', valueField : 'courser_id', textField : 'courser_name', grid : { columns : [{ display : '课程名称', name : 'courser_name' } ], width : 360, //指定弹出框宽度 enabledSort : false, data : $.extend({}, courser_data), checkbox : true, usePager : false, rownumbers : false, frozen : false } }2.解决指定宽度不生效的问题
找到源码ligerui.all.js第16546行，可以看到这里并未获取参数中传过来的width,height属性值，为了使用方便只好修改一下源代码，指定grid的width和height即为Dialog的宽和高。
if (!g.popupFn) { var options = { grid : gridOptions, condition : p.condition, valueField : p.valueField, textField : p.textField, split : p.split, lastSelected : getLastSelected(), onSelect : function (e) { if (g.trigger('select', e) == false) return; if (p.grid.checkbox) { g.addValue(e.value, e.text); g.removeValue(e.remvoeValue, e.remvoeText); } else { g.setValue(e.value); g.setText(e.text); } g.trigger('selected', e); }, selectInit : function (rowdata) { var value = g.getValue(); if (!value) return false; if (!p.valueField || !rowdata[p.valueField]) return false; return $.inArray(rowdata[p.valueField].toString(), value.split(p.split)) != -1; } }; //modify by Rhys Lee.用于支持设置弹出框高度和宽度 if (gridOptions.width) { options.width = gridOptions.width; } if (gridOptions.height) { options.height = gridOptions.height; } //modify end g.popupFn = $.ligerui.getPopupFn(options); }第一次写博客，肯定有不好的地方，希望大家指正。(请轻拍)