easyui 表格使用简述

Posted 2022-12-11 张文琪2022

上周公司临时给我安排了一个活，开发基于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的数据元素
		//初始化的数据可以不显示，但是一定要有