MiniUI学习笔记一【转】
MiniUI Api文档:http://miniui.com/docs/api/index.html
1.取组件值 传递form data,load发送 请求加载数据
<script type="text/javascript">
mini.parse();
// get grid
var grid = mini.get("grid");
var form = new mini.Form("#form");
function search() {
//取得某个id组件的 value
var rq = mini.get("yf").getValue();
if (rq ) {
// 将form 里的参数和值传给 grid发送的请求
grid.load(form.getData(true));
} else {
mini.alert("请选择");
}
}
</script>
2.
confirm确定框 确定title,选项,执行方法
function cz() {
\\取得grid选中行(单选)
var row = grid1.getSelected();
if (row) {
mini.confirm("确认计算?",
"确定?",
function(action) {
\\action 选项
if (action == "ok") {
var jhzt = '10';
var flbm = mini.get("flbm").getValue();
\\ok 则发送ajax请求,执行操作
$.ajax({
url : "${pageContext.request.contextPath}/js/cz.action",
type : "POST",
data : {
flbm:flbm,
pzh:row.pzh,
jhzt:jhzt
},
success : function(text) {
mini.alert("操作成功! ");
\\重新加载数据
grid.reload();
},
error : function(text) {
mini.alert("操作失败! ");
}
});
} else {
}
});
} else {
\\如果没有选中任何数据,弹出消息
mini.alert("请选择一条数据");
}
}
3. 渲染器
<div field="tjskg" name="tjskg" allowSort="true" renderer="onActionRenderer">按钮</div>
<script type="text/javascript">
function onActionRenderer(e) {
var grid = e.sender;
var record = e.record;
var uid = record._uid;
var column = e.column;
var s = ' <a class="mini-button" onclick="js(\''+ uid +'\')">'+e.value+'</a>';
return s;
}
</script>
4.数据转成json,提交表单
//提交表单数据
var form = new mini.Form("#form1");
var data = form.getData(); //获取表单多个控件的数据
var json = mini.encode(data); //序列化成JSON
$.ajax({
url: "../data/FormService.aspx?method=SaveData",
type: "post",
data: { submitData: json },
success: function (text) {
alert("提交成功,返回结果:" + text);
}
});
5.json 反序列化成对象
加载表单
$.ajax({
url: "../data/FormService.aspx?method=LoadData",
type: "post",
success: function (text) {
var data = mini.decode(text); //反序列化成对象
form.setData(data); //设置多个控件数据
}
});
6.发送ajax请求, 生成table ,设置td 跨行跨列属性
function setData(data) {
data = mini.clone(data);
var sbjgbh = data.sbjgbh;
var jsrq = data.jsrq;
var compname = data.compname;
var n = jsrq.substring(0, 4);
var y = jsrq.substring(4, 6);
$.ajax({
url : "${pageContext.request.contextPath}/jh/dd.action",
type : "POST",
data : {
sbjgbh : sbjgbh,
jsrq : jsrq
},
success : function(data) {
if (data.success == true) {
var result = data.result;
var colnamef = [ 'zs', 'mz', 'zy', 'cwz',
'cwmz', 'cwzy', 'zcz', 'zcmz', 'zczy',
'zqz', 'zqmz', 'zqzy' ];
document.getElementById("jsrq").innerHTML = " "
+ n + "年" + " " + y + "月";
document.getElementById("compname").innerHTML = " 机构(名称):"
+ compname;
insertRowsIntoSpace( result,colnamef, "tbody1");
}
},
error : function(data) {
mini.alert("数据未能传递!");
}
});
}
function insertRowsIntoSpace(data,colnamef,
tablenamef) {
for ( var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
for ( var j = 0; j < colnamef.length; j++) {
var colume = document.createElement("td");
var key = colnamef[j];
var value = data[i][key];
colume.appendChild(document.createTextNode(value));
row.appendChild(colume);
}
table.appendChild(row);
}
var row = document.createElement("tr");
var colume = document.createElement("td");
colume.innerHTML = '备注';
//colume.colSpan=12;
//colume.setAttribute("rowSpan", "2");
colume.setAttribute("colSpan", "12");
colume.style.cssText="border:0px;";
row.appendChild(colume);
table.appendChild(row);
}
7.初始化界面及数据 setdata
function setData(data) {
//跨页面传递的数据对象,克隆后才可以安全使用
data = mini.clone(data);
flag = data.flag;
wbwjm = data.wbwjm;
mini.get('flag').setValue(flag);
mini.get('wbwjm').setValue(wbwjm);
}
8.选中多选行,取行中某列参数值
//jquery的push使用方法,可向数组的末尾添加一个或多个元素,并返回新的长度,
var rows = grid.getSelecteds();
if (rows.length > 0) {
if (confirm("确定删除选中记录?")) {
var ids = [];
for (var i = 0, l = rows.length; i < l; i++) {
var r = rows[i];
ids.push(r.id);
}
//为数组添加分隔符
var id = ids.join(',');
grid.loading("操作中,请稍后......");
$.ajax({
url: "../data/AjaxService.aspx?method=RemoveEmployees&id=" +id,
success: function (text) {
grid.reload();
},
error: function () {
}
});
}
} else {
alert("请选中一条记录");
}
12.datagrid 显示 带小数的列,例如 带两位小数
12.1 <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>
<div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
12.2 datatype="float" + numberFormat="n2"
12.3 datatype="currency"
原文:https://blog.csdn.net/skate6/article/details/46621415?utm_source=copy
MiniUI学习笔记一【转】的更多相关文章
- MiniUI学习笔记1
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- jquery miniui 学习笔记
1.取组件值 传递form data,load发送 请求加载数据 <script type="text/JavaScript"> mini.parse(); // ...
- MiniUI学习笔记1-新手必读
1.mini的全局方法 2.Ajax jQuery 拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 详细jQuery Ajax教程,可参考这里. 3. ...
- MiniUI学习笔记1-表单控件
1.输入框样式 class="mini-textbox" //普通输入框 class="mini-password" //密码输入框 class="m ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- 【k8s部署kong一】kong k8s 安装 以及可视化管理界面
官方安装:https://getkong.org/install/kubernetes/ 扩展讲解:https://blog.fleeto.us/post/intro-kong/ 提示:本文是在k8s ...
- Map接口和Collection接口的区别
* Map是双列的,Collection是单列的 * Map的键唯一,Collection的子体系Set是唯一的 * Map集合的数据结构值针对键有效,跟值无关;Collection集合的数据结构是针 ...
- 浅析angular,react,vue.js jQuery-1
作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_01-用户授权业务流程分析
1 用户授权业务流程 用户授权的业务流程如下: 业务流程说明如下: 1.用户认证通过,认证服务向浏览器cookie写入token( 身份令牌) 2.前端携带token请求用户中心服务获取jwt令牌 前 ...
- Java测试当前应用所占用的内存示例
package test; import java.util.HashMap; import java.util.Map; public class TestMemory { public stati ...
- c#webservice的简单示例
webservice.就概念上来说,可能比较复杂,不过我们可以有个宏观的了解:webservice就是个对外的接口,里面有 函数可供外部客户调用(注意:里面同样有客户不可调用的函数).假若我们是服务端 ...
- iOS-DatePicket
组件_DatePicket /** 1.初始化 2.设置选择控件的格式 3.设置日期选择控件的地区 4.监听日期选择控件数值变化 **/ UIDatePicker *datePicker = [[UI ...
- 02. oc语言是动态语言
参照着知乎上大神们给的解释,(https://www.zhihu.com/question/19918532)自己要总结下知识: 自己初级并没有理解 动态.静态.强类型.弱类型 语言的这些含义,区分. ...
- Git操作记录、腾讯工蜂
腾讯工蜂: http://git.code.tencent.com 登录-->>创建项目-->>获取仓库路径 https://git.code.tencent.com/dang ...
- 《CNCF × Alibaba云原生技术公开课》知识点自测(二):容器基本概念
(单选)1.已运行 docker run -d -t —name demo ubuntu top 和 docker run --name demo-x --pid container:demo ubu ...