EasyUI DataGrid View
http://www.jeasyui.com/easyui/datagrid-detailview.js前提一定要引入:datagrid-detailview.js
主要是三个属性和普通的datgagrid的属性不同
view: detailview, //DataGird view必须设置的一个属性
detailFormatter: function (index, row) {}
onExpandRow: function (index, row) {//在展开行的时候触发。}
$('#billlist_PaidUse').datagrid({
method: 'post',
url: 'FinancialAuditService.ashx?Method=GetBillList_PaidUse&ContractGuid=' + $("#contractid").val(),
loadMsg: '正在加载数据...',
fitColumns: true, ////为了冻结列!这里一定要设置为false
singleSelect: true,
showFooter: false, //这里 默认隐藏了页脚************
view: detailview, //DataGird view必须设置的一个属性
detailFormatter: function (index, row) {
var str = '<div style="margin:5px 5px 5px 5px;"><table id="ReceiptGrid_' + index + '"></table><div>'; //收款的列表
return str;
},
onExpandRow: function (index, row) {//在展开行的时候触发。
//这里加载 展开的datagrid, id是ReceiptGrid_+index
//记载完成里面的gird以后记得 重新修复下 当前父grid的高度
$("#billlist_PaidUse").datagrid("fixDetailRowHeight", index);
},
columns: [[
{ title: '唯一guid', field: 'Year', width: , hidden: true },
{ title: '年份', field: 'YearTitle', width: , align: 'center' },
{ title: '应收金额', field: 'Receivable', width: , align: 'right' },
{ title: '已收金额', field: 'Paid', width: , align: "right" },
{ title: '欠收金额', field: 'Arrears', width: , align: 'right' },
{ title: '有效期限', field: 'TimeLimits', width: }
]],
toolbar: '#tbBillToolPaidUse', // id 为tb的Div 详细 查看前台页面HTML代码
onBeforeLoad: function () {
$(this).datagrid('rejectChanges');
},
onClickRow: function (rowIndex, rowData) {
},
onDblClickRow: function (rowIndex, rowData) {
},
onLoadSuccess: function (data) {
}
});
关键的字已经 加粗。。。。。。。
EasyUI DataGrid View的更多相关文章
- easyUI datagrid view扩展
//扩展easyuidatagrid无数据时显示界面 var emptyView = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender ...
- easyui 的 DataGrid View 使用
easyui真是后台人员的宝呀,让不会前台的程序员,不用再用那些自己看着都恶心的表格了! 今天来说说easyui datagrid 的 数据表格详细展示表格,这个有趣多了! 先上图 然后是代码 $(' ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- 初识 easyui datagrid
首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- [转载]easyui datagrid 时间格化(JS 日期时间本地化显示)
easyui datagrid 日期时间显示不正常,后台java 类型为 DATE 经过JSON工具一转化传到前台来就是这样,不便 于是想格式化一下, 格式化代码 如下: [javascript] v ...
- 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码
之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html 大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...
随机推荐
- [CVE:2013-4810]Apache Tomcat/JBoss远程命令执行
<?php $host=gethostbyname($argv[1]); $port=$argv[2]; $cmd=$argv[3]; //small jsp shell //change th ...
- 常用ADB命令
adb devices 查看当前已与pc端连接的设备序列号 adb install -r +apk名称 安装应用程序(带-r参数表示强制安装,可以覆盖安装) adb un ...
- 模仿$.Callbacks实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 如何让div上下左右都居中
在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- SG函数题目
HDU Fibonacci again and again 思路: 把整个游戏看成三个子游戏,然后求游戏的和 关键理解g(x) = mex(g(y), y€f(x)) , f(x)表示由x点可达的点, ...
- [转 ]-- Java线程池使用说明
Java线程池使用说明 原文地址:http://blog.csdn.net/sd0902/article/details/8395677 一简介 线程的使用在java中占有极其重要的地位,在jdk1. ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 应用部署到JBOSS上遇到的问题
原来应用在WAS7.0下,移植到JBOSS eap5.1.2下后,遇到了一些问题,特此记录: 1.数据源配置 在was中,datasource中获取数据源名称时,直接写was中配置的数据源名称即可.而 ...
- CSS规范之BFC & IFC
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div>和<span& ...
- js分组排序算法, OrderBy
由于项目中需要对数据进行分组排序,类似于sql中 order by column1,column2.... 实现的关键是 分组排序,第一个column1,排序完成之后,对其分组,然后按照column ...
前提一定要引入:datagrid-detailview.js