easyui 表格使用简述

上周公司临时给我安排了一个活，开发基于easyui前端框架和java后端的项目的部分功能，对easyui有了初步的了解，特在此分享一下。

---

动态表格的初始化

html:
<table id="datagrid"></table>

js:
//初始化方法
function initDataGrid(){
	$("#datagrid").datagrid({//与html中的table绑定
		url:"getData..,//数据获取url
		queryParams:params,//查询的时候使用，若没有查询则不用使用
		loadFilter : function(data) {
			console.log(data);
			return data;//data视url返回的数据类型而定，如果想直接用data，则返回的数据类型一定是对象
			//且对象的key要与columns中的field对应起来。
			
		},
		columns:[[
        {field:'CK',checkbox:true},
        {field:'NAME',width:'50%',title:'名称',align:'center'}},
      	{field:'TYPE',width:'50%',title:'类型',align:'center'}}
     ]]
		
	});
}

---

表格查询

js:
//声明查询对象 
var params = {
	name : '',
	type: ''
};
//查询执行参数
function searchData() {
	params.name = “zwq”;
	params.type= "abc";
	initDataGrid();//再次执行初始化方法
}

---

修改和删除时获取表格数据ID(唯一标识)

//获取选择数据的ID
function getCheckedIndex(){
	
	var ids = [];
	var rows = $('#datagrid').datagrid('getSelections');
	if(rows.length < 1){//无选择
		alert("请选择一条数据");
		return "";
	}else if(rows.length > 1){//多选
		alert("只能选择一条数据");
		return "";
	}else{
		return rows[0].ID;//单选返回ID，前提是初始化时返回的数据里比较包含key为ID的数据元素
		//初始化的数据可以不显示，但是一定要有
	}
}