【LigerUI实战】Grid弹出编辑popup
最近为分公司的项目做外援，做起了全栈的活。被公司自研架构磨灭的几乎忘掉了其他技能，正好新项目决定重新搭个架构，与同事们讨论过后，决定Spring+MyBatis+SpringMVC+CXF+LigerUI。除了Spring比较熟悉外，其他的还是新接触，不过现在来看，MyBatis和SpringMVC还真是简单易学。不过我的前端知识很有限，干起活来还真是不顺手，所以决定把LigerUI中遇到的问题和解决方案整理整理。
<%@ 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>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
<linktype="text/css"href="/ligerui/skins/Aqua/css/ligerui-all.css"
rel="stylesheet">
<scripttype="text/javascript"src="/js/jquery-1.4.4.min.js"></script>
<scripttype="text/javascript"src="/ligerui/js/ligerui.all.js"></script>
<scripttype="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>
<divid="grid_first"></div>
</body>
</html>
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
}
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)
returnfalse;
if(!p.valueField ||!rowdata[p.valueField])
returnfalse;
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);
}
【LigerUI实战】Grid弹出编辑popup的更多相关文章
- jquerymobile知识点三：弹出层popup
弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...
- datatables.js 简单使用--弹出编辑框或添加数据框
内容:选中某一条记录,弹出编辑框 环境:asp.net mvc , bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...
- 使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
在前篇随笔<使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理>中介绍了Vue-TreeSelect组件的使用,包括使用v-modal绑定值,normalizer ...
- 关于淘宝店铺装修弹出层popup的记录
小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...
- layer弹出层，结合art-template实现弹出编辑
模板 <!-- 模板 --> <script id="render-tpl" type="text/html"> <div cla ...
- [JavaScript] 弹出编辑框
效果:单击图片copy,双击图片或者点Edit都会打开编辑窗口 Style <style> .black_overlay{ display: none; position: absolut ...
- art-template 弹出编辑
<!-- 模板 --> <script id="render-tpl" type="text/html"> <div class= ...
- 在指定控件位置弹出popup window
先看效果图 黄色的就是弹出的popup window 首先自定义一个view用来显示,文件名为layout_my_view.xml <?xml version="1.0" e ...
- PropertyGrid—为复杂属性提供下拉式编辑框和弹出式编辑框
零.引言 PropertyGrid中我们经常看到一些下拉式的编辑方式(Color属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...
随机推荐
- Spring中Bean的生命周期是怎样的
1.Spring对Bean进行实例化(相当于程序中的new Xx()) 2.Spring将值和Bean的引用注入进Bean对应的属性中 3.如果Bean实现了BeanNameAware接口,Sprin ...
- c# 使用事务
EcAttendanceMatterBLL.OpenTransaction(); DbTransaction Tran = EcAttendanceMatterBLL.Transaction; _wf ...
- 编辑器上的vim插件，常用到的快捷件
[vim]常用到的插件命令 [Esc] 退出编辑(输入,插入)模式,回到命令模式中(常用)i, I进入插入模式(Insert mode):i 为『从目前光标所在处插入』, I 为『在目前所在行的第一个 ...
- pyCharm上解决安装不上pandas库问题
最近在PyCharm上安装pandas库的时候,总是安装不上,提示好像是pip除了错误.我使用的是python .4版本.最后判断应该是自己pip版本应该太旧了,最后再cmd更新了pip之后就行了.如 ...
- android多国语言使用
多国语言:在res目录下建立不同名称的values文件来调用不同的语言包 Values文件汇总如下: 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港): ...
- 析构函数和Dispose方法的区别
1. 析构函数(Finalize)只能释放非托管资源, 它是由GC调用. 2. Dispose方法可以释放托管资源和非托管资源,它是由用户手动调用的. 在Dispose()中调用 GC.Suppres ...
- DOCKER实战案例
操作系统:[root@yz6205 ~]# docker search busyboxNAME DESCRIPTION STARS OFFICIAL AUTOMATEDbusybox Busybox ...
- urllib2打开URL（含中文）的问题
import urllib2 url = u"http://www.baidu.com/wd=测试" urllib2.urlopen(url.encode('utf-8')).re ...
- Foundations of Qt Development 学习笔记 Part1 Tips1-50
1. 信号函数调用的时候仅仅会发送出信号,所以不需要执行 ,所以对于信号声明就行,但是不需要进行定义. 2. 只有槽函数可以声明为public,private,或者是protected的,而信号不行. ...
- LeetCode OJ：Happy Number（欢乐数）
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...