jQuery EasyUI 使用笔记
大家有四次抢票机会。第一次是放票时间之后的30分钟。第二次机会是开车前的15天。第三个机会是开车前的48小时。第四个机会是开车前的24小时。
$("#gys_key").combogrid("getValue")
$('#dtpDate').datebox("getValue")
1.导入js
2.datagrid重新加载
3.弹出div,打开新页面
4.实现分页
5.双击
6.嵌套子表格
7.javascript刷新页面
导入JS,CSS
<link href="Themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="Themes/default/easyui.su.css" rel="stylesheet" type="text/css" />
<link href="Themes/icon.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/JQuery.cookie.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="Scripts/JQuery.easyui.utility.js" type="text/javascript"></script>
<script src="Scripts/Login/JQuery.browser.js" type="text/javascript"></script>
<script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
<%-- <script src="Scripts/print_btn.js" type="text/javascript"></script>
<script src="Scripts/CommonFn.js" type="text/javascript"></script>--%>
<script src="Scripts/datagrid-detailview.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload.3.5.js?v=1.1" type="text/javascript"></script>
--datagrid修改数量,uppnumber()要定义在.aspx文件里面
{ field: "qty", title: '数量', width: undefined, align: 'center', sortable: true, formatter: function (value, row, index) {
if (row.gi_code != "页合计" && row.gi_code != "总合计") {
return '<input name="pnumber" dno="' + row.DNO + '" value="' + value + '" type="text" style="width:78px;" class="easyui-numberbox" onChange="uppnumber(this.value,' + row.DNO + ')"/>';
}
else {
return value;
}
}
},
//修改数量
function uppnumber(qty, id) {
if (qty > 0) {
$.ajax({
url: url + "?action=pnumber",
type: "post",
data: { qty: qty, dno: id },
success: function (msg) {
//infoalert(msg);
$("#tb_PODetail").datagrid("reload"); //可以注释
}
});
}
else {
$(this).val("")
alert("采购数量要大于0!");
}
}
datagrid 重新加载 ?
// 加载,分页时会从第1页开始 $('#dg').datagrid('load', {code: '01',name: 'name01' }); // 重新加载,分页时加载当前页数据,你要的刷新,应该是用这个,如果只是刷新,不需要参数,可以直接使用 $('#dg').datagrid('reload'); $('#dg').datagrid('reload', {code: '01',name: 'name01' });
View Code
弹出div $("#div_Search").dialog("open");
打开页面 openModalDialog("GoodsEdit.aspx?code=" + row.code);
分页 Request.Form["page"]
Request.Form["rows"]
int start = ((Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim())) + 1;
int end = (Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim()) + Convert.ToInt32(Request.Form["rows"].ToString().Trim());
sql = "select * from( " + sql + ") as a where a.Ron between " + start + " and " + end;
返回json
//1 result2 = "{\"total\":" + "200" + ",\"rows\":" + result + "}"; total 总行数,rows 显示的row
//2 json += ",\"pagetotal\":\"" + dt.Rows.Count + "\",\"skucount\":\"" + dt2.Rows.Count + "\",\"skutotal\":\"" + itotal + "\"" + "}"; 自定义右下角显示的数据
//1 双击row
onDblClickRow: function (rowIndex, rowData) {
var row = $("#tb_GoodsList").datagrid("getSelected");
if (row != undefined) {
<%if(Otype=="1"){ %>
window.returnValue = row;
window.close();
<%}else{ %>
openModalDialog("GoodsEdit.aspx?" + "id=" + row.gi_id + "&tt=1");
$("#dg_GoodsList").datagrid('reload');
<%} %>
}
}
//2 嵌套datagrid
view: detailview,
detailFormatter: function(index, row){
return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
},
onExpandRow: function(index, row){
$('#ddv-'+index).datagrid({
url: url + "?action=detaillist&oid=" +row.pc_id,//后台Request["oid"]
fitColumns: false,
pagination: true,
pageSize: 15,
pageList: [15, 30, 90, 120],
showFooter: true,
striped: true,
rownumbers: true,
singleSelect: true,
autoRowHeight: true,
loadMsg:'',
height:'auto',
columns:[[
{ field: "pi_id", title: "id", hidden: true },
{ field: "gi_code", title: "商品编码", width: undefined, align: 'center' },
{ field: "gi_shortname", title: '商品简称', width: undefined, align: 'center' },
{ field: "gs_name", title: '规格', width: undefined, align: 'center' },
{ field: "gi_unit", title: '单位', width: undefined, align: 'center' ,sortable:true},
{ field: "gi_importprices", title: '销售价', width: undefined, align: 'center' ,sortable:true},
{ field: "pi_kc", title: '库存数量', width: undefined, align: 'center' },
// { field: "pi_jbkc", title: '警戒库存', width: undefined, align: 'center' },
{ field: "pi_number", title: '采购数量', width: undefined, align: 'center'},
{ field: "pi_price", title: '采购单价', width: undefined, align: 'center'},
{ field: "pi_allmoney", title: '总价', width: undefined, align: 'center'},
]],
onResize:function(){
$('#west_dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#west_dg').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#west_dg').datagrid('fixDetailRowHeight',index);
}
1、使用这个subGrid的视图,需要使用到官网提供的datagrid-detailview.js,其中帮我们定义好了detailView这种显示视图。
在使用过程中,我们只需要在主datagrid中将默认的view用detailView替换掉就可以了。
2、detailFormatter,也就是生成的detail中的初始代码,这里放入一个table,之后可以将其动态创建成datagrid。
3、当主datagrid刚刚初始化完成时,并不显示subGrid,此时subGrid并没有存在的必要,我们也不去创建它。
那什么时候去创建它呢?当我们展开主datagrid中的某条数据的时候,也就是在onExpandRow事件中,才去创建一个它“管辖”的subGrid。
4、创建subGrid的方法和一般创建datagrid的方式差不多,但是后面多了一些fixDetailRowHeight的操作
fixDetailRowHeight这个方法主要是为了调整subGrid的高度用的,如若不加,可能会造成subGrid的高度会出现错位的情况。
不过这里setTimeout的时间为0,那和直接调用function又有什么区别呢?
7. function New2() {
window.location.reload();//刷新页面
//刷新页面,但是要手动清空
// history.go(0);
// $('#txtTax').val('');
// $('#txtpay').val('');
// $('#txtcurrency').val('');
// $('#gys_key').combogrid.setValues('');
}
转载于:https://www.cnblogs.com/chirs888888/p/6228790.html
jQuery EasyUI 使用笔记相关推荐
- eazyui ajax传值,jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/x-www-form ...
- EasyUI学习笔记6:MIS开发利器_ datagrid插件(上)
为什么80%的码农都做不了架构师?>>> 一.引言 终于来到easyui系列笔记的重点部分--数据网格datagrid插件.在MIS开发中,需要展示数据大量数据并且频繁地进行C ...
- EasyUI学习笔记5:来点甜点_ menu和theme插件
摘要 使用easyui-menu插件实现右键菜单关闭tab页,实现更改主题 easyui menu 目录[-] 一.引言 二.右键菜单关闭tab 1.绑定tabs的右键菜单 2. 处理菜单点击事件 三 ...
- JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
- 第二百二十节,jQuery EasyUI,Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- JQuery EasyUi之界面设计——前言与界面效果(一)
为什么80%的码农都做不了架构师?>>> 如果冯巩的开场白是"观众朋友们,我想死你们了",那么我的开场白是"最近一直很忙,很久没有发文了" ...
- 《jQuery EasyUI开发指南》——10.4 迭代开发
本节书摘来自异步社区<jQuery EasyUI开发指南>一书中的第10章,第10.4节,作者:王波著,更多章节内容可以访问云栖社区"异步社区"公众号查看 10.4 迭 ...
- jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
最新文章
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)...
- linux的用户及权限管理,用户及权限管理
- 三分钟教你用 Scarlet 写一个 WebSocket App
- CSS:CSS+JS制作可折叠内容块
- linux下vhd win10,利用win10纯净版系统的VHD虚拟硬盘安装win10系统的方法
- 苹果对体无完肤的 iOS 11 最后的弥补
- JSK-27 三值排序【贪心】
- 一条让人不安的坐地龙
- opencv配置VS2019环境
- jQuery distpicker省市区三级联动
- 2023昆明理工大学计算机考研信息汇总
- C语言四分位数Quartile算法(附完整源码)
- AT命令的简单介绍和使用
- STM32F407VET6
- Java程序员必知必会之JVM运行时数据区
- 马云内部邮件:新入职员工勿批判公司
- About TexturePacker
- 8.抓取西刺网站(代理ip网站)
- (8)点云数据处理学习——ICP registration(迭代最近点)
- 看了个文章,说7z压缩文件损坏后无法恢复。建议使用zip/rar格式
热门文章
- 线性模型第4讲:弹性网络
- Castle动态代理拦截
- 2018-2019-1 20189221 《构建之法》第 3 周学习总结
- java技术学习路线(自用)
- 【转】OpenGL版本与OpenGL扩展机制
- [转]C#中水晶报表实例
- centos7下给bond网卡配置bridge桥接
- 常用模块(collections模块,时间模块,random模块,os模块,sys模块,序列化模块,re模块,hashlib模块,configparser模块,logging模块)...
- erlang 分布式数据库Mnesia 实现及应用
- 1. 数组之差TapeEquilibrium Minimize the value |(A[0] + ... + A[P-1]) - (A[P] + ... + A[N-1])|.