jqGrid实现树状Grid

最新推荐文章于 2024-04-30 19:40:07 发布

wallacewan

最新推荐文章于 2024-04-30 19:40:07 发布

阅读量3.4w

点赞数

分类专栏：程序员人生 UI前端技术文章标签： stylesheet 面试 microsoft url json xhtml

本文链接：https://blog.csdn.net/axzywan/article/details/7384036

版权

UI前端技术同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

程序员人生

8 篇文章 0 订阅

订阅专栏

打工打成股东，然后经历公司清盘，也算是人生一大体验了，呵呵。保持乐观心态，开始寻找下一个目标。

过完年开始找工作，没成想自视甚高的我居然没有接到任何一个我向往的大公司面试电话，怎么会这样？？？难道我命中注定只能待在小公司，~~~~(>_<)~~~~

好不容易朋友推荐了SunGard面试，做摩根史丹利项目的，面试自我感觉良好，可结果还是败了。原因是技术不够强，为什么啊？我面试题基本都答对了啊。

过了近三周又让我去另一个部门面试，这次面试可说前半场胜利，后半场惨败。这下我终于明白为什么上次面试表现那么好还不行了。

原来我欠缺的是多线程，高并发，分布式的事务控制，优化算法的实战经验。悲催啊，这些理论知识可以通过书本学习，实战经验可不就是要去有类似项目的公司积累嘛。

为什么没有公司肯给我这个实践的机会呢？我相信自己还是能胜任的，呵呵！

算了，为了生活先工作吧。

新公司第一个任务的难点是UI方面，要做出Microsoft Project的效果，崩溃，我可一直做后台的，偶尔做做javascript！

没办法，钻研一下吧。初步方案打算用jqGrid实现，以下是树状Grid的部分实现。（截止发帖已经自我否决，还是自己画table吧，比较好控制，时间仓促啊！）

<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>My First Grid</title>  
   
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/jquery/core/css/custom-theme/jquery-ui-1.8.7.custom.css' />" />  
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/jquery/jqgrid/css/ui.jqgrid.css' />" />  
   
<style>  
html, body {  
    margin: 0;  
    padding: 0;  
    font-size: 75%;  
}  
</style>  
   
<script src="<c:url value='/jquery/core/js/jquery-1.4.4.min.js' />" type="text/javascript"></script>  
<script src="<c:url value='/jquery/jqgrid/js/i18n/grid.locale-cn.js' />" type="text/javascript"></script>  
<script src="<c:url value='/jquery/jqgrid/js/jquery.jqGrid.min.js' />" type="text/javascript"></script>  
   
<script type="text/javascript">  
$(document).ready(function(){
 jQuery("#jsonmap").jqGrid({ 
 	treeGrid: true,
    treeGridModel: 'adjacency', //treeGrid模式，跟json元数据有关
    ExpandColumn : 'username',     
    scroll: "true",
    url: '<c:url value='/system/testGrid.action' />',
    datatype: 'json',    
    colNames:['编号','姓名','密码','年龄','地址','出生日期'],    
    colModel:[    
        {name:'id',index:'id', width:90,sorttype:"int"},    
        {name:'username',index:'username', width:110,sorttype:"int"},    
        {name:'password',index:'password', width:80},    
        {name:'age',index:'age', width:80},      
        {name:'address',index:'address', width:80},     
        {name:'time',index:'time', width:80,sorttype:"date"}      
     ],
    pager: "false",  
    sortname: 'id',    
    sortorder: "desc", 
      
    jsonReader: {    
      root: "dataRows",  
      repeatitems : false    
    },    
    treeReader : {
      level_field: "level",
   	  parent_id_field: "parent", 
   	  leaf_field: "isLeaf",
   	  expanded_field: "expanded"
	},
    caption: "jqGrid test",   
    mtype: "POST",
    height: "auto",    // 设为具体数值则会根据实际记录数出现垂直滚动条
    rowNum : "-1",     // 显示全部记录
    shrinkToFit:false  // 控制水平滚动条
 });           
});

</script>  
   
</head>  
<body>  
<table id="jsonmap"  ></table>	
</body>  
</html>

testGrid.action返回的是如下JSON数据：

[{"id":0,"username":"王三","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123"},

{"id":1,"username":"王三","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123"},

{"id":2,"username":"王三","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123"}]

附：jqGrid官网文档 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

wallacewan

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
jqGrid实现树状Grid

打工打成股东，然后经历公司清盘，也算是人生一大体验了，呵呵。保持乐观心态，开始寻找下一个目标。过完年开始找工作，没成想自视甚高的我居然没有接到任何一个我向往的大公司面试电话，怎么会这样？？？难道我命中注定只能待在小公司，~~~~(>_好不容易朋友推荐了SunGard面试，做摩根史丹利项目的，面试自我感觉良好，可结果还是败了。原因是技术不够强，为什么啊？我面试题基本都答对了啊。过了近三
复制链接

扫一扫

专栏目录