easyui表单数据展示常用设置

最新推荐文章于 2024-11-01 13:37:40 发布

退无可退而立版

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量186

点赞数

分类专栏： EasyUI 文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/beiback/article/details/130116122

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.表单

	<table id="showList" class="easyui-datagrid" style="width:100%;height: 100%"
				   data-options="
					   	fit:true,
 						rownumbers:true,
						singleSelect:true,
						pagination:true,
						pageList:[50,100,200,400,1000],
						pageNumber:1,
						pageSize:50,
						striped:true,
						autoRowHeight:false,
						#行记录标志
						idField:'id',
						fitColumns:true,
						# 列表的工具栏头部  不写好报错
					   toolbar:'#xxxxToolBar'
						">
				<thead>
				<tr>
					<th data-options="field:'id',align:'center',width:10,hidden:true">主键id</th>
					<th data-options="field:'userName',align:'center',width:220">用户名</th>
					<th data-options="field:'photo1',width:80,height:80,align:'center',formatter:formPhoto" th:text="无" >图片1</th>
				</tr>
				</thead>
			</table>
				<div id="xxxID"  class="easyui-window"  closed="true" style="width:800px;height:675px;" title="预览图片">
				<img alt="" src="" id="showBigPhoto" style="width:800px;">
			</div>

2.js代码

	$.parser.onComplete = function(res){
	$("#showList").datagrid('getPager').pagination({
			onSelectPage:selectShowList,
		});		
		}

3.调用程序

----------------------selectButton()定义查询按钮函数-------------------------------
// 定义一个查询按钮会触发 下边selectShowList()函数
function selectButton(){
    $("#showList").datagrid('getPager').pagination('select',1);
}
--------------------selectShowList()函数---------------------------------

function  selectShowList(pageNumber,pageSize){
    debugger
    $("#showList").datagrid('unselectAll');
    let pageStartIndex = pageNumber < 1 ? 0 : (pageNumber - 1) * pageSize;
    let selectObject = {//列表带过来 0,50 起始0，步长50项查询前50个数据
        pageSize: pageSize,
        pageStartIndex: pageStartIndex
        ....
        ....
    };
    $.post('当前项目的基路径'+ "/xxcontroller/xxxxControll.do", sendObject, function (res) {
        if (res.result == 'success') {
            $("#showList").datagrid('loaded');
            $("#showList").datagrid('loadData', {total: res.total, rows: res.data});
        } else {
            $("#showList").datagrid('loadData', []);
        }
    }, "JSON");
}
-------------------图片放大格式-----------------------------------
function formPhoto(val) {
		if (val != undefined) {
			return '<img src="' +val + '"  style="width:100px;height:100px;" onclick="showBigPicture(\'' + val + '\')">';
		}else{
			return '<img src="' +'' + '"   style="width:100px;height:100px;" onclick="showBigPicture(undefined)">';
		}
	}
function showBigPicture(url){
		debugger
		if (url==undefined){
			$.messager.alert("空图片", "此处未上传图片", "error");
		}else{
			$('#xxxID').window('open');
			$('#showBigPhoto').attr("src",url);
		}
	}