07. easyui 快速开发

其他 2018-06-02 10:47:27 阅读次数: 0

Datagrid

jsp table

<table class="easyui-datagrid" id="thirdDevConfigGrid">
    <thead>
        <tr>
            <th field="domainId" data-options="width:50,align:'center'">开发服务域ID</th>
            <th field="domainKey" data-options="width:50,align:'center'">开发服务域key</th>
        </tr>
    </thead>
</table>
 
1 
<table class="easyui-datagrid" id="thirdDevConfigGrid">
2 
    <thead>
3 
        <tr>
4 
            <th field="domainId" data-options="width:50,align:'center'">开发服务域ID</th>
5 
            <th field="domainKey" data-options="width:50,align:'center'">开发服务域key</th>
6 
        </tr>
7 
    </thead>
8 
</table>

x
1

js 初始化

$("#orgIncomeDayDim2Grid").datagrid({
	fit : true,
	url : absolutePath + "/stat/queryStatOrgIncomeDayDim2ByOrgIdsDate",
	data : [],
	method : 'POST',
	loadMsg : "正在加载数据，请稍后...",
	emptyMsg : "暂无数据...", // 1.5 版本
	pagination : true,
	pageSize : 10,
	pageList : [ 10, 20, 30, 50 ],
	queryParams : {},
	striped : true,
	singleSelect : true,
	fitColumns : true,
	border : true,
	rownumbers : true,
	showHeader : true,
	showFooter : true,
	sortName:"workDate", 
	sortOrder:"desc",
	onDblClickRow : function(index, row) {
	},
	view : orgIncomeDayDim2.myView,
	rowStyler : function(index, row) {
		if (row.parkType == '8201') {
			return 'color:green;';
		}
	},
    onSortColumn:function(sort,order){
        watchmanSignIn.submitArgs.sort = sort;
        watchmanSignIn.submitArgs.order = order;
    }
});
33
 
1 
$("#orgIncomeDayDim2Grid").datagrid({
2 
    fit : true,
3 
    url : absolutePath + "/stat/queryStatOrgIncomeDayDim2ByOrgIdsDate",
4 
    data : [],
5 
    method : 'POST',
6 
    loadMsg : "正在加载数据，请稍后...",
7 
    emptyMsg : "暂无数据...", // 1.5 版本
8 
    pagination : true,
9 
    pageSize : 10,
10 
    pageList : [ 10, 20, 30, 50 ],
11 
    queryParams : {},
12 
    striped : true,
13 
    singleSelect : true,
14 
    fitColumns : true,
15 
    border : true,
16 
    rownumbers : true,
17 
    showHeader : true,
18 
    showFooter : true,
19 
    sortName:"workDate",
20 
    sortOrder:"desc",
21 
    onDblClickRow : function(index, row) {
22 
    },
23 
    view : orgIncomeDayDim2.myView,
24 
    rowStyler : function(index, row) {
25 
        if (row.parkType == '8201') {
26 
            return 'color:green;';
27 
        }
28 
    },
29 
    onSortColumn:function(sort,order){
30 
        watchmanSignIn.submitArgs.sort = sort;
31 
        watchmanSignIn.submitArgs.order = order;
32 
    }
33 
});

后台分页

	@Override
	public HashMap<Object, Object> queryEntityCardBatchList(String queryStr, String patchStatus, String startTime, String endTime, String page, String rows)
			throws Exception {
		int pageNo = Integer.valueOf(page);
		int pagesize = Integer.valueOf(rows);
		
		HashMap<Object, Object> result = ReturnObject.returnMapDefault();
		int total = entityCardBatchMapper.queryEntityCardBatchListCount(queryStr, patchStatus, startTime, endTime);
		List<EntityCardBatch> list = entityCardBatchMapper.queryEntityCardBatchList(queryStr, patchStatus, startTime, endTime, (pageNo - 1) * pagesize, rows);
9
 
1 
    @Override
2 
    public HashMap<Object, Object> queryEntityCardBatchList(String queryStr, String patchStatus, String startTime, String endTime, String page, String rows)
3 
            throws Exception {
4 
        int pageNo = Integer.valueOf(page);
5 
        int pagesize = Integer.valueOf(rows);
6
7 
        HashMap<Object, Object> result = ReturnObject.returnMapDefault();
8 
        int total = entityCardBatchMapper.queryEntityCardBatchListCount(queryStr, patchStatus, startTime, endTime);
9 
        List<EntityCardBatch> list = entityCardBatchMapper.queryEntityCardBatchList(queryStr, patchStatus, startTime, endTime, (pageNo - 1) * pagesize, rows);

组合标题内容换行，即：线上收入

方式一：组合标题内容换行

<th colspan="7"><span>线上收入</span><br><span>(支付宝、微信、帐户余额、停车卡、POS刷卡、POS扫微信、POS扫支付宝)</span></th>
因为这里，未只有一个datagrid，所以可以不需要太精确的选择 
/**
 * 2017年4月21日 16:16:44 linghaisen
 * 对datagrid 进行 css 定制：实现标题内容换行
 * 		线上收入 （支付宝、微信、帐户余额、停车卡、POS刷卡、POS扫微信、POS扫支付宝）
 */
$(".datagrid-view .datagrid-view1 .datagrid-header .datagrid-header-inner table").css("height","100px");
$(".datagrid-view .datagrid-view2 .datagrid-header .datagrid-header-inner table").css("height","101px");
$(".datagrid-view .datagrid-view2 .datagrid-header .datagrid-header-inner table tr:eq(0) td:eq(4) div").css("height","auto"); // 表头线上 需要换行显示，因此 td:eq(4) 对 height 单独设置
$(".datagrid-view .datagrid-view1 .datagrid-header").css("height","99px");
$(".datagrid-view .datagrid-view2 .datagrid-header").css("height","99px");
// 给 footer 腾出点空间
$(".datagrid-view .datagrid-view2 .datagrid-body").css("height", (parseInt($(".datagrid-view .datagrid-view2 .datagrid-body").css("height")) - 50) + "px");
12
 
1 
/**
2 
 * 2017年4月21日 16:16:44 linghaisen
3 
 * 对datagrid 进行 css 定制：实现标题内容换行
4 
 *      线上收入 （支付宝、微信、帐户余额、停车卡、POS刷卡、POS扫微信、POS扫支付宝）
5 
 */
6 
$(".datagrid-view .datagrid-view1 .datagrid-header .datagrid-header-inner table").css("height","100px");
7 
$(".datagrid-view .datagrid-view2 .datagrid-header .datagrid-header-inner table").css("height","101px");
8 
$(".datagrid-view .datagrid-view2 .datagrid-header .datagrid-header-inner table tr:eq(0) td:eq(4) div").css("height","auto"); // 表头线上 需要换行显示，因此 td:eq(4) 对 height 单独设置
9 
$(".datagrid-view .datagrid-view1 .datagrid-header").css("height","99px");
10 
$(".datagrid-view .datagrid-view2 .datagrid-header").css("height","99px");
11 
// 给 footer 腾出点空间
12 
$(".datagrid-view .datagrid-view2 .datagrid-body").css("height", (parseInt($(".datagrid-view .datagrid-view2 .datagrid-body").css("height")) - 50) + "px");

方式二：js方式解决换行

    {field:'parkInv',title:'计时时间<br>（分钟）',width:50,align:'center'},

datagrid footer 自定义实现

还是有必要保存一份，以节省下次类似开发的时间
该代码仅供参考，不适合完全拷贝复用。2017年4月22日 18:33:04 

orgIncomeDayDim2.myView = $.extend($.fn.datagrid.defaults.view,{
	renderFooter:function(target, container, frozen){
		var o = $.data(target, 'datagrid').options.columns;
		var w = [
                 o[0][0].boxWidth, // 0. 时间宽度
                 o[0][1].boxWidth, // 1. 物业公司宽度
                 o[0][2].boxWidth, // 2. 应收宽度
                 
                 o[1][0].boxWidth, // 3. 离场收费宽度
                 o[1][1].boxWidth, // 4. 欠费宽度
                 o[1][2].boxWidth, // 5. 现金小计宽度
                 
                 o[1][3].boxWidth + o[1][4].boxWidth + o[1][5].boxWidth + o[1][6].boxWidth + o[1][7].boxWidth + o[1][8].boxWidth + o[1][9].boxWidth + 54]; // 6. 线上收入宽度
		var widths = [
		              	[w[0],w[1],w[2],w[3],w[4],w[5],w[6]],
		              	[w[0],w[1],w[2],w[3] + w[4] + w[5] + w[6]],
		              	[w[0],w[1],w[2],w[3],w[4],w[5],w[6]]
		             ]
		
		var footerRows = $("#orgIncomeDayDim2Grid").datagrid("getFooterRows");
		var rows =  $(target).data('datagrid').footer || [];
		// 自己定义 footer 
		rows = [
				["dateTime","rowName","shouldIncomeTotal","cashNormalOrderTotal","cashArrearageOrderTotal","cashTotal","onlineTotal"], //小计
				["dateTime","rowName","shouldIncomeTotal","cashNormalOrderTotal"], // 实收合计
				["dateTime","rowName", "shouldIncomeTotalRemark","cashNormalOrderTotalRemark","cashArrearageOrderTotalRemark","cashTotalRemark","onlineTotalRemark"] // 说明
			   ];
		var table = ['<table id="footerTable" style="height:40px;font-weight:bold;color:black" cellspacing="0" cellpadding="0" border="0">\
		             	<thead>\
		             		<tr>\
		             			 <th style="width:' + o[0][0].boxWidth + 'px;"></th>\
		             			 <th style="width:' + o[0][1].boxWidth + 'px;"></th>\
					             <th style="width:' + o[0][2].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][0].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][1].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][2].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][3].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][4].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][5].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][6].boxWidth + 'px;"></th>\
					             <th style="width:' + o[1][7].boxWidth + 'px;"></th>\
		             			 <th style="width:' + o[1][8].boxWidth + 'px;"></th>\
		             			 <th style="width:' + o[1][9].boxWidth + 'px;"></th>\
		             		</tr>\
		             	</thead>\
		             	<tbody>'];
		for (var j = 0; j < rows.length; j++) {
			 var footerRow = footerRows[j];
			 table.push('<tr datagrid-row-index="' + j + '" style="' + ((j == 2) ? "height:100px;" : "") + '">');
			 for(var i = 0; i < rows[j].length; i++){
				 	var fieldName = rows[j][i];
				 	var columnValue = footerRow[fieldName];  // 获取到 对应列的值
				 	if(i == 0){
				 		table.push('<td field="' + fieldName + '">\
				 				        <div style="height:auto;text-align:center;width:' + (widths[j][i]) + 'px;" class="datagrid-cell"> --- </div>\
				 				    </td>');
				 	}else{
				 		table.push('<td ' + orgIncomeDayDim2.tdColspan(j, i) + ' field="' + fieldName + '">\
				 				        <div style="' + (j == 2 ? "white-space:normal;" : "") + 'color:red;height:auto;text-align:center;width:' + (widths[j][i]) + 'px;" class="datagrid-cell">' + columnValue + '</div>\
				 				    </td>');
				 	}
		     }
			 table.push('</tr>');
		}
        table.push('</tbody></table>');
        $(container).html(table.join(''));
	}
});
68
 
1 
orgIncomeDayDim2.myView = $.extend($.fn.datagrid.defaults.view,{
2 
    renderFooter:function(target, container, frozen){
3 
        var o = $.data(target, 'datagrid').options.columns;
4 
        var w = [
5 
                 o[0][0].boxWidth, // 0. 时间宽度
6 
                 o[0][1].boxWidth, // 1. 物业公司宽度
7 
                 o[0][2].boxWidth, // 2. 应收宽度
8 
                
9 
                 o[1][0].boxWidth, // 3. 离场收费宽度
10 
                 o[1][1].boxWidth, // 4. 欠费宽度
11 
                 o[1][2].boxWidth, // 5. 现金小计宽度
12 
                
13 
                 o[1][3].boxWidth + o[1][4].boxWidth + o[1][5].boxWidth + o[1][6].boxWidth + o[1][7].boxWidth + o[1][8].boxWidth + o[1][9].boxWidth + 54]; // 6. 线上收入宽度
14 
        var widths = [
15 
                        [w[0],w[1],w[2],w[3],w[4],w[5],w[6]],
16 
                        [w[0],w[1],w[2],w[3] + w[4] + w[5] + w[6]],
17 
                        [w[0],w[1],w[2],w[3],w[4],w[5],w[6]]
18 
                     ]
19
20 
        var footerRows = $("#orgIncomeDayDim2Grid").datagrid("getFooterRows");
21 
        var rows =  $(target).data('datagrid').footer || [];
22 
        // 自己定义 footer
23 
        rows = [
24 
                ["dateTime","rowName","shouldIncomeTotal","cashNormalOrderTotal","cashArrearageOrderTotal","cashTotal","onlineTotal"], //小计
25 
                ["dateTime","rowName","shouldIncomeTotal","cashNormalOrderTotal"], // 实收合计
26 
                ["dateTime","rowName", "shouldIncomeTotalRemark","cashNormalOrderTotalRemark","cashArrearageOrderTotalRemark","cashTotalRemark","onlineTotalRemark"] // 说明
27 
               ];
28 
        var table = ['<table id="footerTable" style="height:40px;font-weight:bold;color:black" cellspacing="0" cellpadding="0" border="0">\
29 
                        <thead>\
30 
                            <tr>\
31 
                                 <th style="width:' + o[0][0].boxWidth + 'px;"></th>\
32 
                                 <th style="width:' + o[0][1].boxWidth + 'px;"></th>\
33 
                                 <th style="width:' + o[0][2].boxWidth + 'px;"></th>\
34 
                                 <th style="width:' + o[1][0].boxWidth + 'px;"></th>\
35 
                                 <th style="width:' + o[1][1].boxWidth + 'px;"></th>\
36 
                                 <th style="width:' + o[1][2].boxWidth + 'px;"></th>\
37 
                                 <th style="width:' + o[1][3].boxWidth + 'px;"></th>\
38 
                                 <th style="width:' + o[1][4].boxWidth + 'px;"></th>\
39 
                                 <th style="width:' + o[1][5].boxWidth + 'px;"></th>\
40 
                                 <th style="width:' + o[1][6].boxWidth + 'px;"></th>\
41 
                                 <th style="width:' + o[1][7].boxWidth + 'px;"></th>\
42 
                                 <th style="width:' + o[1][8].boxWidth + 'px;"></th>\
43 
                                 <th style="width:' + o[1][9].boxWidth + 'px;"></th>\
44 
                            </tr>\
45 
                        </thead>\
46 
                        <tbody>'];
47 
        for (var j = 0; j < rows.length; j++) {
48 
             var footerRow = footerRows[j];
49 
             table.push('<tr datagrid-row-index="' + j + '" style="' + ((j == 2) ? "height:100px;" : "") + '">');
50 
             for(var i = 0; i < rows[j].length; i++){
51 
                    var fieldName = rows[j][i];
52 
                    var columnValue = footerRow[fieldName];  // 获取到 对应列的值
53 
                    if(i == 0){
54 
                        table.push('<td field="' + fieldName + '">\
55 
                                        <div style="height:auto;text-align:center;width:' + (widths[j][i]) + 'px;" class="datagrid-cell"> --- </div>\
56 
                                    </td>');
57 
                    }else{
58 
                        table.push('<td ' + orgIncomeDayDim2.tdColspan(j, i) + ' field="' + fieldName + '">\
59 
                                        <div style="' + (j == 2 ? "white-space:normal;" : "") + 'color:red;height:auto;text-align:center;width:' + (widths[j][i]) + 'px;" class="datagrid-cell">' + columnValue + '</div>\
60 
                                    </td>');
61 
                    }
62 
             }
63 
             table.push('</tr>');
64 
        }
65 
        table.push('</tbody></table>');
66 
        $(container).html(table.join(''));
67 
    }
68 
});



Dialog


thirdDevConfig.initDialog = function(){
	//停车场管理添加按钮弹出dialog
	$('#parkDevConfid_dialog').dialog({
		title:'对接服务开发配置信息',
		width:800,
		height:500,
		closed:true,
		closeable:true,
		maximizable:true,
		modal:true,
		onOpen:function(){}
	});
}
13
 
1 
thirdDevConfig.initDialog = function(){
2 
    //停车场管理添加按钮弹出dialog
3 
    $('#parkDevConfid_dialog').dialog({
4 
        title:'对接服务开发配置信息',
5 
        width:800,
6 
        height:500,
7 
        closed:true,
8 
        closeable:true,
9 
        maximizable:true,
10 
        modal:true,
11 
        onOpen:function(){}
12 
    });
13 
}

Form

combobox

// 收费员combobox初始化
$("#watchmanCode").combobox({
	url:absolutePath + '/commonQuery/queryPage.do,
	editable:false,
	width:138,
	valueField:'watchmanCode',
	textField:'loginName',
	queryParams:{
		page:1,
		rows:9999999
	},
	loadFilter:function(data){
		data.rows.unshift({
			selected:true,
			loginName:"全部",
			watchmanCode:"-1"
		});
		return data.rows;
	},
	formatter: function(row){
		if(row.watchmanCode != "-1"){
			return row.loginName + "（" + row.watchmanName + "）";
		}else{
			return "全部";
		}
	}
});
27
 
1 
// 收费员combobox初始化
2 
$("#watchmanCode").combobox({
3 
    url:absolutePath + '/commonQuery/queryPage.do,
4 
    editable:false,
5 
    width:138,
6 
    valueField:'watchmanCode',
7 
    textField:'loginName',
8 
    queryParams:{
9 
        page:1,
10 
        rows:9999999
11 
    },
12 
    loadFilter:function(data){
13 
        data.rows.unshift({
14 
            selected:true,
15 
            loginName:"全部",
16 
            watchmanCode:"-1"
17 
        });
18 
        return data.rows;
19 
    },
20 
    formatter: function(row){
21 
        if(row.watchmanCode != "-1"){
22 
            return row.loginName + "（" + row.watchmanName + "）";
23 
        }else{
24 
            return "全部";
25 
        }
26 
    }
27 
});
注意：data-options="panelMaxHeight:200  // 这个属性在js中配置无效.

对远程数据进行过滤 

orgIncomeDayDim2.initCombobx = function(){
	var url = absolutePath + "/organization/queryCurrentUserOrgList.do";
	var filterData = [];
	var all = {
		orgId:"-1",
		orgName:"全部",
		orgIdList:""
	};
	$.getJSON(url, function(data){
				// 遍历删掉选项:平台
				$.each(data, function(i,item){
				    if(item.orgId != "000000" ){
				    	filterData.push(item);
				    	all.orgIdList += item.orgId + ","
				    }
				});
				
				all.orgIdList = all.orgIdList.substring(0,all.orgIdList.length - 1);
				filterData.unshift(all);
				
				$('#cbx_org').combobox({
					data:filterData,
					editable:false,
					panelHeight:true,
					valueField:'orgId',
					textField:'orgName',
					onLoadSuccess:function(){
						$('#cbx_org').combobox("setValue","-1");
					},
					onSelect:function(record){}
				});
			});
}
 
1 
orgIncomeDayDim2.initCombobx = function(){
2 
    var url = absolutePath + "/organization/queryCurrentUserOrgList.do";
3 
    var filterData = [];
4 
    var all = {
5 
        orgId:"-1",
6 
        orgName:"全部",
7 
        orgIdList:""
8 
    };
9 
    $.getJSON(url, function(data){
10 
                // 遍历删掉选项:平台
11 
                $.each(data, function(i,item){
12 
                    if(item.orgId != "000000" ){
13 
                        filterData.push(item);
14 
                        all.orgIdList += item.orgId + ","
15 
                    }
16 
                });
17
18 
                all.orgIdList = all.orgIdList.substring(0,all.orgIdList.length - 1);
19 
                filterData.unshift(all);
20
21 
                $('#cbx_org').combobox({
22 
                    data:filterData,
23 
                    editable:false,
24 
                    panelHeight:true,
25 
                    valueField:'orgId',
26 
                    textField:'orgName',
27 
                    onLoadSuccess:function(){
28 
                        $('#cbx_org').combobox("setValue","-1");
29 
                    },
30 
                    onSelect:function(record){}
31 
                });
32 
            });
33 
}











猜你喜欢

转载自www.cnblogs.com/lhsaq2009/p/9124614.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022