jeecg datagrid的一些使用技巧

项目用的是jeecg版的easyui http://jeecg3.mydoc.io/

需求1

<t:datagrid name="ReportList" fitColumns="true" autoLoadData="true" title="汇总表"
            actionUrl="collectionReportController.do?find" idField="id"
            fit="true" queryMode="group">
    <t:dgCol title="统计时间" field="statisticsTime" query="true"></t:dgCol>
    <t:dgCol title="活动归类" field="goryName" query="true" replace="*_*"></t:dgCol>
</t:datagrid>

上面这两个字段是开启了查询的，

对于 统计时间 是按input文本框 查询的的，对于时间来说，手动输入时间来进行查询是很不友好的，我们可以借助mydata97这个控件，

http://www.my97.net/demo/index.htm   二. 功能及示例   自定义格式这一栏

用js将datagrid的 input查询框改造成my97的样式

 

$(function () {
        var wdate = $('#ReportListForm').find("input[name='statisticsTime']");
        wdate.addClass("Wdate");
        wdate.attr("onclick","WdatePicker({dateFmt:'yyyy/MM/dd'})");
  });

这样就好了，就是找到需要改造的input框，直接加样式就可以了

记录于2018-11-16 22:43  

时间段的查询

 

<t:dgCol title="开始日期"  field="queryBeginDate"  hidden="true" query="true"></t:dgCol>
<t:dgCol title="截止日期"  field="queryEndDate"    hidden="true" query="true"></t:dgCol>

 hide="true"的作用是不让datagrid中显示这个字段，（这个字段也只是为了查询使用的）

 query="true" 的作用是显示它的查询框

 js

 $(function () {
	$("input[name*='queryBeginDate']").addClass("Wdate").css({
		'width': '100px'
	}).click(function () {
		WdatePicker({dateFmt: 'yyyy-MM-dd'});
	});
	$("input[name*='queryEndDate']").addClass("Wdate").css({
		'width': '100px'
	}).click(function () {
		WdatePicker({dateFmt: 'yyyy-MM-dd'});
	});
})

 

查询框直接间隔有点大，我们可以再调一下 

如下

 $(function () {
	$("input[name*='queryBeginDate']").addClass("Wdate").css({
		'width': '100px'
	}).click(function () {
		WdatePicker({dateFmt: 'yyyy-MM-dd'});
	});
	$("input[name*='queryEndDate']").addClass("Wdate").css({
		'width': '100px'
	}).click(function () {
		WdatePicker({dateFmt: 'yyyy-MM-dd'});
	});
	$("label[title*='截止日期']").css({
		'width': '50px'
	})
})

 

ok 

 后台为了接受这两个查询参数，应该在vo定义这两个字段和他的get set方法

private String queryBeginDate;
private String queryEndDate;

 sql片段 

用的是minidao

<#if vo.queryBeginDate ?exists && vo.queryBeginDate ?length gt 0>
	and to_date(VISIT_DATE,'yyyy-mm-dd') >=to_date('${vo.queryBeginDate}','yyyy-mm-dd')
</#if>
<#if vo.queryEndDate ?exists && vo.queryEndDate ?length gt 0>
	and to_date(VISIT_DATE,'yyyy-mm-dd') <=to_date('${vo.queryEndDate}','yyyy-mm-dd')
</#if>

 还有一点，既然是时间段查询那么开始时间就不能大于截止时间

参考

http://my97.net/demo/resource/2.4.asp 

<input id="d4311" class="Wdate" type="text" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/> 
<input id="d4312" class="Wdate" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>

 最终页面代码如下

 $(function () {
	$("input[name*='queryBeginDate']").attr("id","begin123");
	$("input[name*='queryEndDate']").attr("id","end123")
	$("#begin123").addClass("Wdate").css({
		'width': '100px'
	}).click(function () {
		WdatePicker({maxDate:'#F{$dp.$D(\'end123\')}'})
	});
	$("#end123").addClass("Wdate").css({
		'width': '100px'
	}).click(function () {
		WdatePicker({minDate:'#F{$dp.$D(\'begin123\')}'})
	});
	$("label[title*='截止日期']").css({
		'width': '50px'
	})
})

需求二 

给datagrid的查询加下拉框，

对于 活动归类 本来可以直接用replae 就可以展示成下拉款，但无奈的是下拉框的数据时是动态生成的，我们需要给他自己生成的下拉框加点料

$(function () {
        var select1 =  $('#ReportListForm').find("select[name='goryName']");
        select1.attr("id","goryName");
        select1.find("option :last").remove()//移除它原有的*号下拉值

        $.post("reportController.do?getGoryName",{},function (data) {
            $.each(data,function(i,v){
                select1.append("<option value='"+v.key+"'>"+v.value+"</option>");
            });
        },"json")
   });

这样就好了

三

easyui datagrid 的几个常见属性

<attribute>
    <name>fitColumns</name>
    <rtexprvalue>true</rtexprvalue>
    <description>当为true时，自动展开/合同列的大小，以适应的宽度，防止横向滚动</description>
</attribute>

<attribute>
    <name>fit</name>
    <rtexprvalue>true</rtexprvalue>
    <description>是否适应父容器,true 默认 ,false</description>
</attribute>

fitColumns boolean True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal
scrolling. 防止grid出现水平滚动条

width    number     The width of column. If not defined, the width will auto expand to fit its contents. No width definition
will reduce performance.

fixed     boolean    True to prevent from adjusting width when 'fitColumns' is set to true.

 jeec 封装的

<attribute>
    <name>fitColumns</name>
    <rtexprvalue>true</rtexprvalue>
    <description>当为true时，自动展开/合同列的大小，以适应的宽度，防止横向滚动</description>
</attribute>

<attribute>
    <name>fit</name>
    <rtexprvalue>true</rtexprvalue>
    <description>是否适应父容器,true 默认 ,false</description>
</attribute>

四 easyui datagrid的格式化

<th data-options="field:'datab',width:100,editor:{type:'datebox'},formatter:formatDate">开始时间</th>

function formatDate(value) {
   if(value==''){
       return new Date().format('yyyy-MM-dd');
    }
    return new Date().format('yyyy-MM-dd',value + '');
}

  function formatequeu(value,row,index) {
        if (row.queuStatus="320"){
            return "排队"
        } else if(row.queuStatus="300"){
            return "等待"
        }else if (row.queuStatus="340"){
            return "完成"
        }
    }

还可以返回html

function audio(value,row,index) {
       return "<button onclick='look("+index+")'>点击查看</button>";
 }

五

easyui的

getSelections    none    Return all selected rows, when no record selected, an empty array will return.
deleteRow       index    Delete a row.
getRowIndex       row        Return the specified row index, the row parameter can be a row record or an id field value.
getData    none    Return the loaded data.
getRows    none    Return the current page rows.

 

六

datagrid
 <th data-options="field:'Code',width:100,align:'right'">单号</th>
 <th data-options="field:'Code',width:100,align:'right'"> 类型</th> 
 field相同会自动合并列 只显示第一个列标题
 width:100属性千万不能加单位，不能为width:100px,否则这个组件全面出错，
 field:'Code'  ，field字段的值必须用单引号，否则也是全面出错
 data-options :onLoadSuccess:onloaded要有对应的方法，否则也是全部出错

 属性
 fitColumns        boolean     True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling.
 width            number     The width of column. If not defined, the width will auto expand to fit its contents. No width definition will reduce performance.

 方法
fitColumns        none     Make columns auto expand/collapse to fit datagrid width.
 fixColumnSize    field     Fix columns size. If 'field' parameter is not assigned, all columns size will be fixed.
                            Code example:
                            $('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
                            $('#dg').datagrid('fixColumnSize');  // fix all columns size
fixRowHeight    index    Fix the specified row height. If 'index' parameter is not assigned, all rows height will be fixed
autoSizeColumn    field    adjusts the column width to fit the contents. Available since version 1.

 

sort            param    Sort the datagrid. Available since version 1.3.6.
                            Code example:

                            // sort on a column
                            $('#dg').datagrid('sort', 'itemid');
                            // sort on a column with specified order
                            $('#dg').datagrid('sort', {
                                sortName: 'productid',
                                sortOrder: 'desc'
                            });
                            // sort on multiple columns
                            $('#dg').datagrid('sort', {
                                sortName: 'productid,listprice',
                                sortOrder: 'desc,asc'
                            });

 var row = $('#queue').datagrid('getSelected');
 alert(row.queuNum)或 alert(row['queuNum'])  queuNum为一行数据中的一个字段id

 

七

2018-08-31 20:28:52

spring mvc responsebody 会自动将时间类型转换为时间戳字符串
easyui datebox日期框本身没有问题
但和可编辑的edatagrid 合用时会有些许问题
<th data-options="field:'datbi',width:100,editor:{type:'datebox'},formatter:formatDate">结束时间</th>
它可以接受date 类型也可以接受string  可以设置任何值，
但是当点击这个edatagrid准备填写或选择日期时，他会显示出原值而不是格式化后的值 
比如当我后台返回时间戳时，虽然我已经格式化成年月日，但我点击它编辑时它还是会显示为时间戳
当我后台返回date时，我格式化为年月日，但我编辑它时，它又会显示为date即时间的完整类型

当我时间选择日期完后 再次编辑就会正常2018-08-15 也没有调用format 可见只有第一次展示数据时他才会调用formatDate格式化日期   
no当结束编辑时它也会调用格式化，格式化value但此后的value都是2018-08-14格式的，所以再次编辑不会出现影响

结论 edatagrid中数据处于编辑状态时，value都是他原有的数据，不是格式化后的数据

所以当我使用这个控件时，后台返回的数据最好是2018-08-15字符串形式，第一次显示才不会出现这么多问题

<th data-options="field:'datbi',width:100,editor:{type:'datebox'},formatter:formatDate">结束时间</th>
 function formatDate(value) { 编辑或选择时，会直接显示value
            return "2018-11-11"
        }

$('#' + datagridId).datagrid('options') 获得datagrid所有参数
{id: "datagridId", title: "", iconCls: null, width: 1718, height: 419, …}
$('#' + datagridId).datagrid('options').queryParams;获得载入数据时的查询参数u
queryParams:{searchColums: "", undefined: "", bpmStatus: "", matnr: "1300120019", maktx: "", …}

八

2018-08-31 19:36:53
js正则
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
if (!phoneReg.test(temp[1])) {
    $.messager.show({
        title:'提示',
        msg:'请输入有效的手机号码',
        height:150,
        timeout:2000,
        showType:'slide'
    });
    return false
}
easyui验证手机号
<input id="phoneOne" class="easyui-textbox" type="text" value="${vo.phoneOne}" data-options="required:true,validType:'phoneRex'"  />
//自定义验证手机号
$.extend($.fn.validatebox.defaults.rules, {
    phoneRex: {
        validator: function(value){
            var rex=/^1[3-8]+\d{9}$/;
            if(rex.test(value)){
                return true;
            }else{
                return false;
            }
        },
        message: '请输入正确的手机号码格式'
    }

九

2018-08-31 20:39:16

easyui初始化控件时
应在
$(function(){
    在这里初始化，否则界面会出现些小问题
})

页面禁止滚动
<body scroll="no" style="overflow: hidden">

 

十

重新加载并请求第一页数据 （可以带请求参数）
Query data with some parameters.

$('#dg').datagrid('load', {
    name: 'easyui',
    address: 'ho'
});

load
Load and show the first page rows. 
If the 'param' is specified, it will replace with the queryParams property. 
Usually do a query by passing some parameters, 
this method can be called to load new data from server.
$('#dg').datagrid('load',{
    code: '01',
    name: 'name01'
});

刷新当前页数据（不可以带请求参数）
After changing data to server, refresh the front data.

$('#dg').datagrid('reload');    // reload the current page data
reload    
Reload the rows. Same as the 'load' method but stay on current page.

 

带查询的

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
	<meta charset="UTF-8">
	<title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<div class="easyui-layout" fit="true">
	<div region="center" style="padding:1px; height: 100%">


		<div id="tb" style="padding:3px">
			<span >职位：</span><input type="text" name="positionName"  id="positionName" />
			<span>姓名：</span><input type="text" name="linkMan"  id="linkMan" />
			<span style="float:right">
                    <a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="querydg()">查询</a>
                    <a href="#" class="easyui-linkbutton" iconcls="icon-reload" onclick="reloaddg()">重置</a>
			</span>
		</div>

        <table class="easyui-datagrid" name="demo" style="width: auto; height: auto;" title="" id="dg"
			   data-options="url:'reportController.do?findActCheckAllList'"
			   singleSelect="true"
			   idField="id"
			   pagination="true"
			   pageSize="30"
			   rownumbers="true"
			   fit="true" toolbar="#tb"
			   >
			<thead>
				<tr>
					<th  data-options="field:'id',align:'center',hidden:'true'" >id</th>
					<th  data-options="field:'positionName',align:'center'" >职位</th>
					<th  data-options="field:'linkMan',align:'center'">姓名</th>
					<th  data-options="field:'createDate',align:'center'">时间</th>
				</tr>
			</thead>
        </table>


	</div>
</div>

<script>
	function querydg() {
		$('#dg').datagrid('load',{
            positionName:$('#positionName').val(),
            linkMan:$('#linkMan').val()
		});
    }

    function reloaddg() {
        $('#positionName').val("");
        $('#linkMan').val("")
        $('#dg').datagrid('load',{
            positionName:"",
            linkMan:""
        });
    }
</script>

10.1优化

<div id="tb" style="padding:3px">
    <span >职位：</span><input type="text" name="positionName"  id="positionName" />
    <span>姓名：</span><input type="text" name="linkMan"  id="linkMan" />
    <span style="float:right">
            <a href="#" class="easyui-linkbutton" iconcls="icon-search" οnclick="querydg()">查询</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-reload" οnclick="reloaddg()">重置</a>
    </span>
</div>
当我们查询字段多了的时候，我们的查询和重置函数就写起来很麻烦，需要一个一个字段地设置。

我么可以方便地使用选择器来完成这些事

var params = [];

$(function () {
    initTheQueryParams();
});

function initTheQueryParams() {
    var idVal;
    $('#tb').find("input").each(function () {
        idVal = $(this).attr("id");
        params.push(idVal);
    });
    $('#tb').find("select").each(function () {
        idVal = $(this).attr("id");
        params.push(idVal);
    })
}

//获取查询条件
function getQueryData() {
    var thisData = {};//声明一个对象
    var key ;
    for (var s in params){
        key = params[s];
        //添加对象的键值对属性
        thisData[key] = $('#' + key).val();
    }
    return thisData;
}

/**
* 查询
*/
function doSearch() {
    $('#dg').datagrid('load',getQueryData());
}

/**
* 重置
*/
function doReset() {
    resetTheData();
    $('#goodslist').datagrid('load',getQueryData());
}

//重置查询条件
function resetTheData() {
    $('#tb').find("input").val("");
    $('#tb').find("select").val("");
}

//js 测试对象构造
function test(){
    var object = {};
    object['name']='tom';
    object['age']=16;
    console.log(object);
}

  Object { name: "tom", age: 16 }

10.2

有时候我们需要用  window.location.href = url + encodeURI(params);来传递查询的参数
但  window.location.href 对于中文参数必须双层编码，
window.location.href = url + encodeURI(encodeURI(params)后台还需要解码一次
具体 参考 https://www.cnblogs.com/shangxiaofei/p/3816467.html
但当查询数据多了以后，一个一个参数编码解码很麻烦，

可以用下面的方法替换

function PostNewWin(postUrl,data){
        var postData = JSON.stringify(data);
        var iframe =document.createElement("iframe");
        iframe.id = "postData_iframe";
        iframe.scr= "about:blank";
        iframe.frameborder = "0";
        iframe.style.width = "0px";
        iframe.style.height = "0px";
        var form = document.createElement("form");
        form.id = "postData_form";
        form.method = "post";
        form.target = "_blank";
        document.body.appendChild(iframe);
        iframe.contentWindow.document.write("<body>" + form.outerHTML + "</body>");
        /* iframe.contentWindow.document.getElementById("postData_form").innerHTML = "<input name='ids' id='ids' type='text' value='" + ids + "'/>";*/
        iframe.contentWindow.document.getElementById("postData_form").innerHTML =iframe.contentWindow.document.getElementById("postData_form").innerHTML+ "<input name='postData' id='postData' type='text' value='" + postData + "'/>";
        iframe.contentWindow.document.getElementById("postData_form").action = postUrl;
        iframe.contentWindow.document.getElementById("postData_form").submit();
    };

data参数是一个对象  调用10.1的getQueryData()函数即可

后台的接收
因为传递的是json数据
所以后台需要转换

@RequestMapping(params = "exportExcel")
public void ExportExcel(HttpServletRequest request, HttpServletResponse response,String postData){
    ReportVo vo = JSON.parseObject(postData,ReportVo.class);
   //
}

 10.3 、datagrid常用方法

 

当我们在datagrid上点击查询了以后，可以用datagrid内置的函数来获取查询参数

就下面这个方法
Name     Parameter    Description
options     none        Return the options object.

$('#dg').datagrid('options').queryParams; 返回查询参数
$('#' + datagridId).datagrid('options').columns[0]  表头上的所有字段 包括隐藏的    {field: "", title: ""}

//用逗号拼接表头上的所有字段

$.each($('#' + datagridId).datagrid('options').columns[0], function(i, val) {
            fields += val.field + ',';
});

var queryParams = $('#dg').datagrid('options').queryParams;
    $.each(queryParams, function(key, val) {
        console.log(key+"-"+val) //循环打印查询参数
});

 

10.4 easyu datagrid 显示图片

 

<th data-options="field:'img',width:100,formatter:picture">图片</th>

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>

//value为图片的http地址
function picture(value,row,index) {
       if(value){
           return  "<img style='width: 120px;height:80px;cursor: pointer;' src="+img + "  οnclick='picBig(this)'>";
       }
}
 

//当鼠标点击图片是可以放大
function picBig(obj){
    var src = obj.src;//获取当前点击的img元素中的src属性
    $("#bigimg").attr("src", src);//设置#bigimg元素的src属性
    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
    $("<img/>").attr("src", src).load(function(){
        var windowW = $(window).width();//获取当前窗口宽度
        var windowH = $(window).height();//获取当前窗口高度
        var realWidth = this.width;//获取图片真实宽度
        var realHeight = this.height;//获取图片真实高度
        var imgWidth, imgHeight;
        $("#bigimg").css("width",600);//以最终的宽度对图片缩放
        $("#bigimg").css("height",500);//以最终的宽度对图片缩放

        var w = (windowW-600)/2;//计算图片与窗口左边距
        var h = (windowH-500)/2;//计算图片与窗口上边距
        $("#innerdiv").css({"top":h, "left":w});//设置#innerdiv的top和left属性
        $("#outerdiv").fadeIn("fast");//淡入显示#outerdiv及.pimg
    });

    $("#outerdiv").click(function(){//再次点击淡出消失弹出层
        $(this).fadeOut("fast");
    });
}