jquery treegrid实例

前台jqurey代码

function organDatagrid(){
	$organ_treegrid  = $('#organ_treegrid').treegrid({
    url:ctx+'/petition/petition-info/organ-datagrid',
    fit:true,
    fitColumns:false,//自适应列宽
    striped:true,//显示条纹
    rownumbers:true,//显示行数
    nowrap : false,
    border : false,
    singleSelect:true,
    showFooter : true,
    remoteSort:false,//是否通过远程服务器对数据排序
/*  sortName:'orderNo',//默认排序字段
    sortOrder:'asc',//默认排序方式 'desc' 'asc' */
    idField : 'id',
    treeField:"name",
/*  frozenColumns:[[
        {field:'name',title:'机构名称',width:200},
        {field:'sysCode',title:'机构系统编码',width:120}
    ]], */
    columns:[[
        {field:'id',title:'主键',hidden:true,sortable:true,align:'right',width:80},
        {field:'name',title:'机构名称',width:400},
        {field:'pcount',title:'信访数量',width:120},
        {field:'scale',title:'比例',width:120}
    ]]
   }).datagrid('showTooltip');
}

后台业务代码

	@RequestMapping(value = {"organ-datagrid"})
	@ResponseBody
	public Datagrid<Map> getPetitionOrgan(@RequestParam(value = "startTime", required = false)Date startTime,
			@RequestParam(value = "endTime", required = false)Date endTime) throws Exception {
		List<Map> list = null;
                //此处省略业务代码
		Datagrid<Map> dg= new Datagrid<Map>(list.size(), list);
        return dg;
	}	

接收到的数据格式

{
  "total" : 20,
  "columns" : null,
  "rows" : [ {
    "id" : 2,
    "scale" : "58.62%",
    "pcount" : 17,
    "status" : 0,
    "_parentId" : null,
    "name" : "江西省烟草专卖局(公司)"
  }, {
    "id" : 22,
    "scale" : "17.24%",
    "pcount" : 5,
    "status" : 0,
    "_parentId" : 2,
    "name" : "赣州市烟草专卖局(公司)"
  }, {
    "id" : 40,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "章贡区烟草专卖局(分公司)"
  }, {
    "id" : 46,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "赣县烟草专卖局(分公司)"
  }, {
    "id" : 53,
    "scale" : "3.45%",
    "pcount" : 1,
    "status" : 0,
    "_parentId" : 22,
    "name" : "南康市烟草专卖局(分公司)"
  }, {
    "id" : 59,
    "scale" : "3.45%",
    "pcount" : 1,
    "status" : 0,
    "_parentId" : 22,
    "name" : "大余县烟草专卖局(分公司)"
  }, {
    "id" : 65,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "信丰县烟草专卖局(分公司)"
  }, {
    "id" : 72,
    "scale" : "10.34%",
    "pcount" : 3,
    "status" : 0,
    "_parentId" : 22,
    "name" : "上犹县烟草专卖局(分公司)"
  }, {
    "id" : 78,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "崇义县烟草专卖局(分公司)"
  }, {
    "id" : 84,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "安远县烟草专卖局(分公司)"
  }, {
    "id" : 91,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "龙南县烟草专卖局(分公司)"
  }, {
    "id" : 97,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "定南县烟草专卖局(分公司)"
  }, {
    "id" : 103,
    "scale" : "6.9%",
    "pcount" : 2,
    "status" : 0,
    "_parentId" : 22,
    "name" : "全南县烟草专卖局(分公司)"
  }, {
    "id" : 109,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "于都县烟草专卖局(分公司)"
  }, {
    "id" : 114,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "宁都县烟草专卖局(分公司)"
  }, {
    "id" : 121,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "兴国县烟草专卖局(分公司)"
  }, {
    "id" : 128,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "瑞金市烟草专卖局(分公司)"
  }, {
    "id" : 135,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "会昌县烟草专卖局(分公司)"
  }, {
    "id" : 141,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "寻乌县烟草专卖局(分公司)"
  }, {
    "id" : 147,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "石城县烟草专卖局(分公司)"
  } ]
}

dataGrid可以不需要用DataGrid类来构造,只需返回list;treeGrid必须返回DataGrid类这样的构造数据,才能有树形显现。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-10 20:50:43

jquery treegrid实例的相关文章

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

Jquery Mobile实例--利用优酷JSON接口读取视频数据

本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到API接口 (http://open.youku.com/docs/tech_doc.html) 可以看到优酷提供不少API,本文将演示“通过视频关键词”接口. 点击进去后,会发现client_id和keyword是必填的,因此,未来构造的URL应该类似 https://openapi.youku.c

jQuery Ajax 实例 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$

jQuery插件实例四:手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,

jQuery Ajax 实例 ($.ajax、$.post、$.get)转

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$

jquery ajax实例教程和一些高级用法

jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ajax实例,后面会有一些ajax高级用法 query ajax的调用方式:jquery.ajax(url,[settings]),因为实际使用过程中经常配置的并不多,所以这里并没有列出所有参数,甚至部分参数默认值,就是最佳实践,根本没必要去自己定义,除非有特殊需求,如果需要所有参数,可以查看jq

十分钟玩转 jQuery、实例大全(参考自博主索宁)

十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里不再细说,详细猛戳这里. 基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素,从 0 开始 $(&q

jquery 操作实例一

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@include file="../../common/taglib.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&g

锋利的jQuery幻灯片实例

//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body { font-size: 12px; } .v_show { width: 592px; margi