官方演示地址：http://www .特里兰德。com/blog/jqgrid/jqgrid。超文本标记语言效果图

页面代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题本地数据/title link href=' CSS/Redmond/jquery-ui-1。8 .14 .定制。CSS ' rel='样式表/link href=' CSS/ui。jqgrid。CSS ' rel='样式表'/脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。6 .2 .量滴js /脚本脚本类型=' text/JavaScript ' src=' http 3360 js/jqueryready(function(){ $(' # list 1 ')).jqGrid({ datatype:'local '，height:250，colnames 3360['自动编号','地区编号','地区名称','所属城市编号]，colModel:[ //这一项比较重要，其中的名字属性主要是用于后期的页面代码（注意这里的范围是本页面上的代码，不会涉及到后台代码), 而指数属性是则是用于涉及后台时，给后台传递排序字段{name:'id '，index:'id '，width:60，sorttype:'int'}，{ name: ' areaID '，index: ' areaID '，width:80，sortable:false}，//sortable是该字段是否排序{name:'area '，index:'area '，width:180}，{name: '父亲，index: '父亲，width:100，sortable:false} //colModel两个最主要就是1:name前台射流研究…用，2:index给后台传递排序字段],多选：路径，//是否允许多选择多项标题： '中国各城市的主要地区' //表格的标题文字});var mydata=[ {id:'1 '，areaID:'110101 '，area: '东城区，父：'110100'}，{id:'2 '，区域ID:'110102 '，区域： '西城区，父：'110100'}，{id:'3 '，区域ID:'110103 '，区域： '崇文区，父：'110100'}，{id:'4 '，区域ID:'110104 '，区域： '宣武区，父：'110100'}，{id:'5 '，区域ID:'110105 '，区域： '朝阳区，父：'110100'}，{id:'6 '，区域ID:'110106 '，区域： '丰台区，父：'110100'}，{id:'7 '，区域ID:'110107 '，区域： '石景山区，父：'110100'}，{id:'8 '，区域ID:'110108 '，区域： '海淀区，父：'110100'}，{id:'9 '，区域ID:'110109 '，区域： '门头沟区，父：'110100'}，{id:'10 '，区域ID:'110111 '，区域： '房山区，父： ' 110100 ' }];for(var I=0；imydata . lenti)//循环给每行添加数据{ $('#list1 ').jqGrid('addRowData '，i 1，我的数据[I])；} });/script/head body表id=' list 1 '/table div id=' page 1 '/div/body/html