easyui 表格使用简述

红太狼 2024-04-17 22:25 73阅读 0赞

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