【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属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...
随机推荐
- Java中Collections.sort()排序详解
public static void main(String[] args) { List<String> list = new ArrayList<String>(); ...
- H5滑动穿透（TODO）
https://github.com/pod4g/tool/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E ...
- 通过Linux命令搭建测试环境里面的jdk
一.文件准备 1.1 文件名称 jdk-8u121-linux-x64.tar.gz 1.2 下载地址 http://www.oracle.com/technetwork/java/javase/do ...
- EL表达式 分割字符串 ，forEach定次循环
后台取出来的是字符串 以 a,b,c, 的形式 前台要将字符串中的“,”去掉 ,并forEach重新拼接 list.labelsName不用加${} <c:set value=" ...
- 【scala】可变与不可变的理解
我们定义变量的时候分为var可变变量和val不可变变量. 我们使用容器的时候也分为可变容器和不可变容器. List和Tuple本身就是不可变的,set和map分为可变和不可变的,默认为不可变. 我们看 ...
- 【2018年全国多校算法寒假训练营练习比赛（第四场）- E】通知小弟(强连通缩点)
题目链接:https://www.nowcoder.com/acm/contest/76/E 题目描述 在战争时期,A国派出了许多间谍到其他国家去收集情报.因为间谍需要隐秘自己的身份, ...
- mongodb倒排索引
这周主要都花时间搞mongodb上了,业务场景是上游产出几个城市的全量道路code值,每个城市的数据量大概在100w~200w之间,每条数据对应好几个feature,形如: { code: 0, fe ...
- LeetCode OJ：Maximum Subarray（子数组最大值）
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
- Python基础学习（第9天）
第九课:动态类型 1.在Python中,有一类特殊的对象,是专门用来存储数据的,常见的有数字.字符串.数列.字典等.这些对象是存储在内存中的实体,我们并不能直接接触到它们,在程序中接触的是对象名,是指 ...
- pg_rewind 源端时间线发生改变 同步失败
master-standby情况下,发生如下行为: 1.master停掉后,standby做为新的master(可能存在部分事物没有同步到standby中). 2.新master运行过程中出错,进行恢 ...