easyui明细表
发布时间：2017/7/11 10:19:58 次浏览 作者:admin
一、前台页面
<!--收支明细 start-->
<table id="financeDetail"></table>
<!--收支明细 end-->
二、js页面
$(function () {
fgrid.bind();});var fMainUrl="/finance/ashx/financeMainHandler.ashx?t=d";var fgrid={
bind:function(){
$("#financeDetail").datagrid({
nowrap: false, //折行 url:fMainUrl,//获取数据网址 rownumbers: true, //行号 striped: true, //隔行变色 idField: 'KeyId',//主键 singleSelect: true, //单选 frozenColumns: [[]],
fitColumns:true,
rowStyler: function(index,row){
if (row.s=='支出'){
return 'background-color:#cd740b;color:#fff;';
}
},//行样式 columns: [[
{title:'序号',field:'KeyId',width:60,},
{title:'收支',field:'s',width:60,},
{title:'单位',field:'company',width:120},
{title:'经手人',field:'userName',width:120},
{title:'部门',field:'depName',width:120},
{title:'收(付)账户',field:'accountName',width:200},
{title:'合计金额',field:'total',width:120},
{title:'实际金额',field:'payment',width:120},
{title:'单号',field:'edNumber',width:120},
{title:'备注',field:'note',width:120},
{title:'添加时间',field:'add_time',width:120},
{title:'更新时间',field:'up_time',width:120}
]],
toolbar: [{
iconCls: 'icon-save',
text:'注意：编辑好后请先点保存!',
handler: function(){
//点头部文件动作 }
}],
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv" style="padding:5px 0"></div>';
},
onExpandRow: function(index,row){//展开的时候
$.ajax({
type: "POST",
url: "/finance/ashx/financeDetailHandler.ashx?t=list&KeyId="+row.KeyId+"",
data: {"filter":"{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"financeId\",\"op\":\"eq\",\"data\":\""+row.KeyId+"\"}],\"groups\":[]}"},
dataType: "json",
beforeSend: function () { },
complete: function () { },
success: function (d) {
//alert(JSON.stringify(d)); var temptab="<table width=100% border=0 cellpadding=0 cellspacing=5><tbody>";
temptab=temptab+"<tr bgcolor=#cccccc><td>科目名称</td><td>金额</td><td>备注</td><td>记录时间</td><td>入账时间</td></tr>";
var temptrtd="";
$.each(d, function(i,item) {
temptrtd=temptrtd+"<tr><td>"+item.subjectName+"</td><td>"+item.sumMoney+"</td><td>"+item.note+"</td><td>"+item.add_time+"</td><td>"+item.up_time+"</td></tr>";
});
temptab=temptab+temptrtd+"</tbody></table>";
var ddv = $("#financeDetail").datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({//把这个div 弄成面板 border:false,
content:""+temptab+"",
onLoad:function(){
//$('#financeDetail').datagrid('fixDetailRowHeight',index); }
});
$('#financeDetail').datagrid('fixDetailRowHeight',index);
}
});
$('#financeDetail').datagrid('fixDetailRowHeight',index);
},
pagination: true,
pageSize: 10,
pageList: [10,20, 40, 50],
});
}}var grid = {
bind: function (winSize) {
$('#list').datagrid({
url: actionURL,
toolbar: '#toolbar',
title: "数据列表",
iconCls: 'icon icon-list',
width: winSize.width,
height: winSize.height,
nowrap: false, //折行 rownumbers: true, //行号 striped: true, //隔行变色 idField: 'KeyId',//主键 singleSelect: true, //单选 frozenColumns: [[]],
columns: [[
{title:'编号',field:'KeyId',width:120},
{title:'主表ID',field:'financeId',width:120},
{title:'编号',field:'edNumber',width:120},
{title:'科目名称',field:'subjectId',width:120},
{title:'金额',field:'sumMoney',width:120},
{title:'备注',field:'note',width:120},
{title:'添加时间',field:'add_time',width:120},
{title:'更新时间',field:'up_time',width:120}
]],
pagination: true,
pageSize: PAGESIZE,
pageList: [20, 40, 50]
});
},
getSelectedRow: function () {
return $('#list').datagrid('getSelected');
},
reload: function () {
$('#list').datagrid('clearSelections').datagrid('reload', { filter: '' });
}};function createParam(action, keyid) {
var o = {};
var query = top.$('#uiform').serializeArray();
query = convertArray(query);
o.jsonEntity = JSON.stringify(query);
o.action = action;
o.keyid = keyid;
return "json=" + JSON.stringify(o);}var CRUD = {
add: function () {
var hDialog = top.jQuery.hDialog({
title: '添加', width: 350, height: 300, href:formurl, iconCls: 'icon-add', submit: function () {
if (top.$('#uiform').validate().form()) {
var query = createParam('add', '0');
jQuery.ajaxjson(actionURL, query, function (d) {
if (parseInt(d) > 0) {
msg.ok('添加成功！');
hDialog.dialog('close');
grid.reload();
} else {
MessageOrRedirect(d);
}
});
}
return false;
}
});
top.$('#uiform').validate();
},
edit: function () {
var row = grid.getSelectedRow();
if (row) {
var hDialog = top.jQuery.hDialog({
title: '编辑', width: 350, height: 300, href: formurl, iconCls: 'icon-save',
onLoad:function() {
top.$('#txt_KeyId').val(row.KeyId);
top.$('#txt_financeId').val(row.financeId);
top.$('#txt_edNumber').val(row.edNumber);
top.$('#txt_subjectId').val(row.subjectId);
top.$('#txt_sumMoney').val(row.sumMoney);
top.$('#txt_note').val(row.note);
top.$('#txt_add_time').val(row.add_time);
top.$('#txt_up_time').val(row.up_time);
},
submit: function () {
if (top.$('#uiform').validate().form()) {
var query = createParam('edit', row.KeyId);;
jQuery.ajaxjson(actionURL, query, function (d) {
if (parseInt(d) > 0) {
msg.ok('修改成功！');
hDialog.dialog('close');
grid.reload();
} else {
MessageOrRedirect(d);
}
});
}
return false;
}
});
} else {
msg.warning('请选择要修改的行。');
}
},
del: function () {
var row = grid.getSelectedRow();
if (row) {
if (confirm('确认要执行删除操作吗？')) {
var rid = row.KeyId;
jQuery.ajaxjson(actionURL, createParam('delete', rid), function (d) {
if (parseInt(d) > 0) {
msg.ok('删除成功！');
grid.reload();
} else {
MessageOrRedirect(d);
}
});
}
} else {
msg.warning('请选择要删除的行。');
}
}};
