jquery的treegrid应该如何使用，快速上手

骄傲的行动家

于 2020-12-16 10:37:23 发布

阅读量921

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/wei1359765074410/article/details/111247063

版权

本文详细介绍了如何使用JavaScript初始化一个表格，包括从后台接口获取JSON数据，设置表格列信息，以及使用treeTable插件进行数据展示。内容涵盖列初始化、数据排序和选择功能，对于前端数据操作具有参考价值。

摘要由CSDN通过智能技术生成

第一步：后台接口放回对应的json数据

第二步：对表格的每一列进行初始化，每列的field都对应后台接口返回的对应列信息


```javascript
/**
 * 初始化表格的列
 */
var columns = [
{
	field : 'selectItem', //第一列th
	radio : true    //单选款
},
{
	title : '菜单ID',
	field : 'id',
	align : 'center',
	valign : 'middle',
	width : '80px'
},
{
	title : '菜单名称',
	field : 'name',
	align : 'center',
	valign : 'middle',
	width : '130px'
},
{
	title : '上级菜单',
	field : 'parentName',
	align : 'center',
	valign : 'middle',
	sortable : true,
	width : '100px'
},
{
	title : '类型',
	field : 'type',
	align : 'center',
	valign : 'middle',
	width : '70px',
	formatter : function(item, index) {
		if (item.type == 1) {
			return '<span class="label label-success">菜单</span>';
		}
		if (item.type == 2) {
			return '<span class="label label-warning">按钮</span>';
		}
	}
}, 
{
	title : '排序号',
	field : 'sort',
	align : 'center',
	valign : 'middle',
	sortable : true,
	width : '70px'
}, 
{
	title : '菜单URL',
	field : 'url',
	align : 'center',
	valign : 'middle',

	width : '160px'
}, 
{
	title : '授权标识',//要显示的标题名称
	field : 'permission',//json串中的key
	align : 'center',//水平居中
	valign : 'middle',//垂直居中
	sortable : false //是否排序
} ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)

第三步：对treetable表格进行ajax初始化**

var treeTable=new TreeTable(
				"menuTable",//tableId html中表的id
				"menu/doFindObjects",//url  接口路径url
				 columns);//表中列的配置  第二步设置的
	//treeTable.setExpandColumn(2);
	//做表格初始化
	treeTable.init();	//发起ajax请求(借助ajax函数)

要想获取表格中用户选择的列可以使用treegrid插件的内置方法

function doGetCheckedId(){
	//方法1:
	//var radio=$("tbody input[type='radio']:checked");
	//if(radio)return radio.val();
	//方法2:
	//1.获取选中的记录
	var selections=$("#menuTable")
	//bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数
	//getSelections为扩展函数内部要调用的一个方法
	.bootstrapTreeTable("getSelections");
	//2.对记录进行判定
	if(selections.length==1)
	return selections[0].id;
}