datagrid view使用方法及设置默认打开为折叠

本人是java程序员,主要是写后台的,但有时候也需要写写前台,而这次写前台需求是页面生成指定的列,当列被单击展开它的详细信息,由于本人用的是easyui框架,知到easyui的

datagrid view 可以实现此功能,所以稍微研究了一下,为方便有相同需求的小伙们今将代码帖出来


我是把整个文件上的代码全部帖出来,由于js跟jsp上肯定还有其它功能的代码,所以小伙伴一定要看清哪一部分是属性datagrid view上的代码,哪一部分不是

当然我相信,做为一个程序员,哪怕是小白,这点分辨能力还是有的


jsp代码很简单就一句代码:定义一个div ,当然首先你得引入datagrid-groupview.js文件,这个不说我相信你也懂的,这个文件下载地址百度一下到处都是,我就不发了


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="../../header.jsp"%>
<script type="text/javascript" src="<%=path%>/script/datagrid-groupview.js"></script>
<script type="text/javascript" src="unitFacilitiesReCheckTaskInfoADW.js"></script>
<body>
</div>

<table id="dataGrid" title="消防监督检查记录"></table>

<div id="dataWin" style="overflow:hidden">

<div id="dataGridADW"></div>

</div> 
</body>
<%@ include file="../../footer.jsp"%>

js代码,我全部贴出来,我相信小伙伴们一眼就能找出哪部分是属于我们要的代码

/**
 * 页面初始化
 */
function initPageEnd() {
ajaxFillCombo('/adminJson/systemOrgan_getTreeValue', 's_moiId', 'combotree');
}
/**
 * 初始化DataGrid的列
 */
function getDataGridColumns() {
return [ [ {
field : 'duiName',
title : '被检查单位'
},{
field : 'checkName1',
title : '主承办人'
},{
field : 'checkName2',
title : '协办人'
},{
field : 'dufrtStatus',
title : '任务状态',
formatter:function(value){
if('' == value || undefined == value || null == value){
return ;
}
return value == 0 ? '待检查' : '已检查';
}
},{
field : 'dufrtStartdate',
title : '开台日期'
},{
field : 'dufrtEnddate',
title : '截止日期'
},{
field : 'dufrStatus',
title : '检查结果'
},{
field : 'dufrSn',
title : '检查编号'
}] ];
}


/**
 * 设置DataGrid提交到Action的参数
 */
function getDataGridParams() {
return {
'whereInfo.querys.moiId' : $('#s_moiId').combotree('getValue'),
'whereInfo.querys.dufrtStartdateStart' : $('#s_dufrtStartdate').datebox('getValue'),
'whereInfo.querys.dufrtEnddate' : $('#s_dufrtEnddate').datebox('getValue'),
'whereInfo.querys.dufrtStatus':9,//9代表已处理
};
}


/**
 * 设置查询表单提交的Action地址,有查询操作必须存在该方法
 */
function getSearchFormUrl() {
return '/adminJson/workUnitFacilitiesRecheckTaskInfo_getTasksOK';
}


/**
 * 格式化显示DataGrid的行
 */
function setDataGridRowStyler(index, row) {
if (row.valid == '0') {
return 'color:red;';
}
}


//双击事件
function dataGridRowDbClick(index, row){

initDateGrid(index, row);
// $('.datagrid-header .datagrid-cell span ').css('font-size','16px');//修改DataGrid中列名称字体大小
var row = $('#dataGrid').datagrid('getSelected');

$("#dataWin").window('open');
$("#dataWin").window('center');
$("#dataWin").window('setTitle','消防监督检查记录');

$('#dataForm').form({
prefix : 'data'
});
$('#dataForm').form('load', row);
}


function initDateGrid(index, row){

$('#dataWin').window('resize',{
width: $(document).width()*0.85,
height: $(document).height()*0.8
});

$('#dataGridADW').datagrid({//我们要的主要代码在这个地方,其它地方跟datagrid一模一样,只有最后那四行代码是追加的
autoRowHeight : false,
height :'75%',
width:'100%',
fit : false,
fitColumns : true,
singleSelect : true,
rownumbers : true,
border : true,
striped : false,
// pagination : true,
queryParams:{'data.dufrtId':row.dufrtId},
pageSize : 50,
url:path+'/adminJson/workUnitFacilitiesRecheckTaskInfo_getCheckReocrd',
   columns:[[/* {
    field:'dufrdType',title:'目录',width:'19%',formatter:formatDirectory
    },*/{
    field:'dufrdContent',title:'条目',width:'24%'
},{
field:'dufrdItems',title:'检查',width:'24%'
},{
field:'dufrdMemo',title:'描述',width:'24%'
},{
field:'dufrdFile',title:'查看',width:'22%',formatter : function(value,row,index){
if(value==''|| undefined == value){
return ;
}else{
var url='<a href="'+ path +'/' + value + '" target="_blank">查看</a>';
return url;
}
}
}]],
groupField:'dufrdType',//定义分组字段
view: groupview,//定义展示的视图,groupview也就是刚刚我们引入的js里面的function
groupFormatter:function(value){//groupFormatte方法返回分组内容。value参数指明了分组值定义的'groupField'属性。还有一个rows属性,
return formatDirectory(value);//rows参数指明了指定分组值的数据行。 formatDirectory是我在我项目公共js上定义的function 代码在下面也帖出来
       },
       onLoadSuccess:function(data){//若你需要页面在打开时所有分组默认是折叠状态,加上这句代码
           $('#dataGridADW').datagrid('collapseGroup'); //collapseGroup 折叠一个分组
       }
});
 
}




最后我们回到页面 你会看到如下效果:



不用谢,大家都叫我雷锋


“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

江西DJ烟仔ReMix

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值