EasyUI自定义边框分割线样式

最新推荐文章于 2024-01-18 14:59:58 发布

cg_program

最新推荐文章于 2024-01-18 14:59:58 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI

本文链接：https://blog.youkuaiyun.com/foart/article/details/9630313

EasyUI 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用EasyUI框架配置数据表格的具体实例。该实例详细展示了如何通过JavaScript进行数据表格的初始化设置，包括数据源、按钮操作、列定义等，并设置了分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('#dg').datagrid({
		url:'${basePath}/getAppraisal_jgrid.do?type=query&sqlKey=' + sqlKey + '&jsonStr=' + jsonStr,
		method:"post",remoteSort:false,rownumbers:true,fit:true,//fitColumns:true,
		toolbar: [{
			iconCls: 'icon-add',text:'浏览鉴定单',
			handler: function(){ }
			},'-',{
			iconCls: 'icon-edit',text:'打印',
			handler: function(){ }
			},'-',{
			iconCls: 'icon-remove',text:'打印明细',
			handler: function(){ }
			},'-',{
			iconCls: 'icon-back',text:'打印报告书',
			handler: function(){ }
			},'-',{
			iconCls: 'icon-back',text:'上传图片',
			handler: function(){ }
			}],
		columns:[[  
		{field:'ap_ID',title:'id',width:0,hidden:true},
		{field:'look',title:'查看',align:'center',width:37,
        	formatter: function(value,row,index){
        		if(row.showBrowseIcon){//显示查看图标,默认false是不显示		
					return "<a href='#'><input  type='image' onclick=\"javascript:got_page('accidentForm.jspx','" + row.sgdId + "','" + sqlKey  + "');\" src='" + '${basePath}' + "/res/images/browse.gif'/></a>";					
        		}
				return "";
			},styler: function(value,row,index){
				if (row.showFlag){//在datagrid中记录行分割线的显示，true：表示显示，false：表示不显示
					return ' border-bottom-color:black; border-bottom-width: 11 11 10px 11; border-right-color:black;';					
				}else{
					return 'border-bottom-color:transparent;border-right-color:black;';
				}
			}
		},{field:'ap_State',title:'状态',align:'center',width:67,
        	formatter: function(value,row,index){
        		return pdJDDState(row,isShowDJState); 
			},styler: function(value,row,index){
				var temp ="";
				var state = pdJDDState(row,isShowDJState);
				if (state=='已审'){
					temp = "color:#0066CC;";					
				}
				if(state=="√已收款"){
					temp = "color:#663399;";//
				}
				if(state=="已作废"){
					temp = "color:#FF6600;";//
				}
				if(state=="未知"){
					temp = "color:#FF0000;";//
				}
				if (row.showFlag){//在datagrid中记录行分割线的显示，true：表示显示，false：表示不显示
					return temp +' border-bottom-color:black; border-bottom-width: 11 11 10px 11; border-right-color:black;';					
				}else{
					return temp + 'border-bottom-color:transparent;border-right-color:black;';
				}
			}
		}
		]] ,		        
        onDblClickRow:function(rowIndex, rowData) {        
		},
		onLoadSuccess:function(data){
		},onBeforeLoad:function(param){
		},
		singleSelect:true,pagination:true
	});
	var p = $('#dg').datagrid('getPager');
	p.pagination({
		pageSize : 10,// 每页显示的记录条数，默认为20
		pageList : [ 10, 20, 30 ],// 可以设置每页记录条数的列表
		beforePageText : '第',// 页数文本框前显示的汉字
		afterPageText : '页    共 {pages} 页',
		displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录' 
	});