【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属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...
随机推荐
- AOP切面用于系统日志
import org.aspectj.lang.JoinPoint; import org.aspectj.lang.annotation.*; import org.springframework. ...
- mybatis报错 Error instantiating interface com.atguigu.mybatis.dao.DepartmentMapper with invalid types () or values ()
mybatis报错 Error instantiating interface com.atguigu.mybatis.dao.DepartmentMapper with invalid types ...
- centos下使用fdisk扩展分区容量大小
硬盘空间为20G,VMware增加磁盘大小,需要再增加10G空间 扩展完后,重启系统,再次使用fdisk -l查看,会发现硬盘空间变大了: 重新创建分区,调整分区信息 本次实验主要对/dev/sda4 ...
- SSL和SSH的区别
SSL是一种国际标准的加密及身份认证通信协议,您用的浏览器就支持此协议.SSL(Secure Sockets Layer)最初是由美国Netscape公司研究出来的,后来成为了Internet网上安全 ...
- Ajax-03 XmlHttpRequest实现Ajax
概述 Ajax主要就是使用XmlHttpRequest对象来完成请求的操作,该对象在主流浏览器中均存在 XmlHttpRequest对象的主要方法 a. void open(String method ...
- 解决JQUERY在IE8,7,6下将字符串转成XML对象时产生的BUG
js 定义一个xml 对象,var data = "<Root><DataRow Id=\"1234\"/></Root>" ...
- opensack-mitaka网络性能测试shaker
一.项目介绍 Shaker项目是由Mirantis发起,专门针对OpenStack网络性能的测试工具.通过模拟不同的网络场景和heat模板,创建虚拟机,并在虚拟机里运行iperf.iperf3.net ...
- 【spark】分区
RDD是弹性分布式数据集,通常RDD很大,会被分成多个分区,保存在不同节点上. 那么分区有什么好处呢? 分区能减少节点之间的通信开销,正确的分区能大大加快程序的执行速度. 我们看个例子 首先我们要了解 ...
- python基础之面向对象（二）
面向对象对程序设计OOD 找对象---->找类(归纳对象相同的特征与技能,还有没和对象独有的特征)面向对象编程OOP 先定义类---->实例化出对象查看成绩,交作业 在python3中,所 ...
- 八行代码解决八皇后问题（c++）
说的有点夸装,实际上并不只是巴航代码,加上前面的变量声明之类的一共有40多行的样子吧,好像是在知乎上看到的,现在有时间再把它写下来: 其中用到了一些c++11特性,例如lambda 以及给予范围的 f ...