jqGrid实现树状Grid

原创 2012年03月22日 18:01:32

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

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

好不容易朋友推荐了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

JqGrid treegrid 树形表格示例

treegrid树形表格,动态加载 1、HTML代码 2、JS代码 jQuery("#one_grid").jqGrid({ url:'/test.action', ...

jqGrid JS之TreeGrid (树形表格)- yellowcong

JqGrid的版本是jqGrid JS - v5.1.0,然后根据中文的API,咋整都没有弄出来,当时真是心累啊,主要注意的有id隐藏列定义、Grid数据定义(注意parent、id的数据类型以及Gr...

jqGrid 树形列表

js代码$(function(){ $("#jq-grid").jqGrid({ treeGrid: true, treeGridModel: 'adj...

JqGrid学习总结_9树形表格TreeGrid

1、树形表格TreeGrid官网:        http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid 2、从后台获取数据显示为树形表...

JdGrid树形表格分页

JdGrid实现树形表格分页查询

jqGrid的树形表格:treeGrid

jqGrid实现树状Grid http://blog.csdn.net/axzywan/article/details/7384036  JQgrid tree 终于有数据了 http://www....
  • twsghxs
  • twsghxs
  • 2014年09月17日 18:36
  • 5945

jqGrid的樹形表格:treeGrid

第一個列子  /pages/demo/tree.json  ----------------------------------  { "total":11, "page":1,...

树形表格treegrid的使用心得

树形表格treegrid的使用心得最近在做后台管理系统的界面的时候总是需要用到树形表格,相信大多数做后台系统都会有同样的需求。 今天就说一下最近使用easyui中的treegrid的心得。 - t...

jqGrid构造下拉表格控件 dropDownGrid -ace Admin

使用ace Admin开发过程中使用modal(模态框)弹出表单,输入框需要从数据库其他表中取值填充,一般情况下select或更方便的chosen就可以;若需要在下拉中显示多列,chosen就满足不,...
  • zrk1000
  • zrk1000
  • 2015年06月19日 13:52
  • 4519

jqGrid 树形表格多选

使用了jqGrid的treeGrid做数据展示,使用中有对树形的数据多选的需求,需要选择一个节点,同时选择其所有子节点;查看了API,发现treeGrid不支持,还是自己动手来完成...
  • zrk1000
  • zrk1000
  • 2015年07月15日 10:23
  • 3442
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqGrid实现树状Grid
举报原因:
原因补充:

(最多只允许输入30个字)