jQuery版Easy UI了解

前言

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

    这一个主要是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(''));

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

关闭正在打开的dialog

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

excel文件导入

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

<div id="importDialog"></div>

/**
    * 导入
    */
	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，直接使用行内样式进行修改

但是当表格有分页的时候，行内样式是无法控制分页部分的内容

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

表格重新加载

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

popup

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

关闭popup

$.closePopup();

打开popup

<div id="category" class="weui-popup__container">
	  <div class="weui-popup__overlay"></div>
	  <div class="weui-popup__modal">
        你的内容...
      </div>
</div>

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

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

这个默认是打开全屏展示

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

<div id="category" class="weui-popup__container popup-bottom">
	  <div class="weui-popup__overlay"></div>
	  <div class="weui-popup__modal">
        你的内容...
      </div>
</div>