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

最新推荐文章于 2023-09-10 07:50:48 发布

江西DJ烟仔ReMix

最新推荐文章于 2023-09-10 07:50:48 发布

阅读量7.8k

点赞数 2

文章标签： easyui datagrid datagrid view

本文链接：https://blog.csdn.net/u014598014/article/details/52633982

版权

本人是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 折叠一个分组
       }
});
 
}

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

不用谢,大家都叫我雷锋

江西DJ烟仔ReMix

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
datagrid view使用方法及设置默认打开为折叠

本人是java程序员,主要是写后台的,但有时候也需要写写前台,而这次写前台需求是页面生成指定的列,当列被单击展开它的详细信息,由于本人用的是easyui框架,知到easyui的datagrid view 可以实现此功能,所以稍微研究了一下,为方便有相同需求的小伙们今将代码帖出来我是把整个文件上的代码全部帖出来,由于js跟jsp上肯定还有其它功能的代码,所以小伙伴一定要看清哪一部分是
复制链接

扫一扫