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

来源：互联网发布：淘宝培训编辑：程序博客网时间：2024/05/01 01:35

本人是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里面的functiongroupFormatter:function(value){//groupFormatte方法返回分组内容。value参数指明了分组值定义的'groupField'属性。还有一个rows属性,return formatDirectory(value);//rows参数指明了指定分组值的数据行。 formatDirectory是我在我项目公共js上定义的function 代码在下面也帖出来       },       onLoadSuccess:function(data){//若你需要页面在打开时所有分组默认是折叠状态,加上这句代码           $('#dataGridADW').datagrid('collapseGroup'); //collapseGroup 折叠一个分组       }}); }

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

不用谢,大家都叫我雷锋

1 0