jQuery版Easy UI了解

绝地灬酷狼 2022-10-10 01:41 224阅读 0赞

前言

通篇主要是记录自己碰到的问题去记录，主要没什么逻辑，可以通过目录搜索

这一个主要是jQuery版的了解

### 取得 datagrid 选中行数据 ###

数据网格（datagrid）组件包含两种方法来检索选中行数据：

*  getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
 *  getSelections：取得所有选中行数据，返回元素记录的数组数据。

本编博客处在Easy UI了解阶段，所以有的例子可能是抄的，可能全是抄的，因为百度确实不好找

<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
    		url="data/datagrid_data.json"
    		title="Load Data" iconCls="icon-save">
    	<thead>
    		<tr>
    			<th field="itemid" width="80">Item ID</th>
    			<th field="productid" width="80">Product ID</th>
    			<th field="listprice" width="80" align="right">List Price</th>
    			<th field="unitcost" width="80" align="right">Unit Cost</th>
    			<th field="attr1" width="150">Attribute</th>
    			<th field="status" width="60" align="center">Stauts</th>
    		</tr>
    	</thead>
    </table>

取得选中行数据：

var row = $('#tt').datagrid('getSelected');
    if (row){
    	alert('Item ID:'+row.itemid+"
    Price:"+row.listprice);
    }

取得所有选中行的 itemid：

var ids = [];
    var rows = $('#tt').datagrid('getSelections');
    for(var i=0; i<rows.length; i++){
    	ids.push(rows[i].itemid);
    }
    alert(ids.join(''));

例子是从[官网][Link 1]的示例那边抄的，里面有[demo][]

### 关闭正在打开的dialog ###

使用jquery关闭正在打开的dialog，代码如下：  
$('\#yourDivId').dialog('close');

### excel文件导入 ###

是通过[easyui之excel导入数据\_天水一欢的博客-CSDN博客\_easyui导入excel][easyui_excel_-CSDN_easyui_excel] 这个看的

/**
        * 导入
        */
    	function importToExcel (url){
    		$('#importDialog').dialog({
    			title: '导入文件',
    			width: 400,
    			height: 240,
    			closed: false,
    			cache: false,
    			content :'<form action="" id="importForm" >'
    					+'<div style=" text-align: center;line-height:100px ;">'
    					+'导入文件： <input class="easyui-filebox" name="file" prompt="选择文件..." buttonText="选择文件" accept="application/vnd.ms-excel" style="width:260px;height:30px" data-options="required:true">'
    					+'</div></form>',
    			modal: true,
    			buttons:[{
    				text:'导入',
    				handler:function(){
    					if (!$("#importForm").form('validate')) return;
    					// var url = 'http://localhost:8082/springmvc2/hello/importExcel.do';
    					$("#importForm").ajaxSubmit({
    						timeout:3000000,
    						type:"post",
    						url:url,
    						async: false,
    						beforeSend:function(){
    							$.messager.progress({
    								title: '提示',
    								msg: '文件上传中，请稍候……',
    								text: ''
    							});
    						},
    						complete:function () {
    							$.messager.progress('close');
    						},
    						success:function(json){
    							console.log('json',json.data);
    
    							if(json.success){
    								$.messager.alert('温馨提示',json.msg);
    								$('#importDialog').dialog('close');
    								$('#infoList').datagrid('load',{});
    								
    							}else{
    								$.messager.alert('温馨提示',json.msg);
    							}
    						},
    						error: function(XmlHttpRequest, textStatus, errorThrown){
    
    						}
    					});
    				}
    			},{
    				text:'关闭',
    				handler:function(){
    					$('#importDialog').dialog('close');
    				}
    			}]
    		});
    
    	};

导入，url是后端提供的导入路径，进行导入

infoList为导入数据的表格的id

### 导出数据 ###

重点使用的是window.location.href

/* 导出数据  */
    	function exportToExcel(url,datagridId){
    		var data=$('#' + datagridId).datagrid('getData');
    		var queryParams = $('#'+datagridId).datagrid('options').queryParams;
    		var gridTotal = data.total;
    		if(gridTotal>20000){
    			tip('数据超过2万条,请分批查询导出');
    			return;
    		}
    		
    		var params = '&';
    		$.each(queryParams, function(key, val){
    			if(val!=null && val !=''){
    				params+='&'+key+'='+val;
    			}
    		}); 
    		tip("请稍候...");
    		var path = url + encodeURI(params);
    		window.location.href = path; 
    	}

### 修改表格高度 ###

直接修改表格的id，直接使用行内样式进行修改

但是当表格有分页的时候，行内样式是无法控制分页部分的内容![20210701162649842.png][]

当分页被影响的时候，需要在表格外再嵌套一层div，直接限制div的高度来达到在可使区域展示分页

### 表格重新加载 ###

$('#infoList').datagrid('load',{});

### popup ###

//Popup 和 picker 之类的不要共用一个弹出方法，因为这样会导致 在 popup 中再弹出 picker 的时候会有问题。

关闭popup

$.closePopup();

**打开popup**

$("#category").popup();

需要打开id为category的div时，就必须有在div内有上述的代码

这个默认是打开全屏展示

如果想设置默认在底部展示，可以添加类 popup-bottom

[Link 1]: https://www.jeasyui.net/tutorial/23.html
[demo]: http://www.jeasyui.com/tutorial/datagrid/datagrid3_demo.html#
[easyui_excel_-CSDN_easyui_excel]: https://blog.csdn.net/qq_40263927/article/details/93455143
[20210701162649842.png]: /images/20221005/be9bde65c2804c3492c3acb07dacc425.png