使用本地数据生成表格的例子
<body>
<!-- jqGrid table list4 -->
<table id="list"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="pager"></div>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<button name="yingchang" onclick="aa()" width="100" />
</body>
<script>
//ajax后台获取数据
// $(document).ready(function(){
// $("#list4").jqGrid({
// url:contextPath + "search.action",
// datatype:"json", //数据来源
// mtype:"POST",//提交方式
// height:420,//高度，表格高度。可为数值、百分比或‘auto‘
// //width:1000,//这个宽度不能为百分比
// autowidth:true,//自动宽
// colNames:[‘1‘, ‘2‘, ‘3‘,‘4‘,‘5‘],
// colModel:[
// //{name:‘id‘,index:‘id‘, width:‘10%‘, align:‘center‘ },
// {name:‘createDate‘,index:‘createDate‘, width:‘20%‘,align:‘center‘},
// {name:‘phoneNo‘,index:‘phoneNo‘, width:‘15%‘,align:‘center‘},
// {name:‘cardNo‘,index:‘cardNo‘, width:‘20%‘, align:"center"},
// {name:‘remark‘,index:‘remark‘, width:‘35%‘, align:"left", sortable:false},
// {name:‘del‘,index:‘del‘, width:‘10%‘,align:"center", sortable:false}
// ],
// rownumbers:true,//添加左侧行号
//altRows:true,//设置为交替行表格,默认为false
// //sortname:‘createDate‘,
// //sortorder:‘asc‘,
// viewrecords: true,//是否在浏览导航栏显示记录总数
// rowNum:15,//每页显示记录数
// rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。
// jsonReader:{
// id: "blackId",//设置返回参数中，表格ID的名字为blackId
// repeatitems : false
// },
// pager:$(‘#gridPager‘)
// });
// });
</script>
<script >
function aa(){
alert(1);
$("#list").toggle();
//$("#list").hide();
}
$(document).ready(function() {
var a = 3;
var q = [];
var a = ["1", "2", "3", "4", "5", "6", "21", "32", "43", "42", "45", "26"];
var b = ["23", "4.2.3", "1.2", "1.2", "1", "1.23", "2.3", "4.2.3", "1.2", "12", "1", "1.2.3"];
var c = ["qw", "fe", "WW", "WE", "QWE", "SA", "qw", "fe", "WW", "WE", "QWE", "SA"];
var d = ["DEW", "QW", "QW", "WQ", "QE", "SDF", "DEW", "QW", "QW", "WQ", "QE", "SDF"];
for (var i = 0; i < a.length; i++) {
/* if(i== a.length-1){
q += "{\"id\":\""+ a[i]+"\",\"areaID\":\"" + b[i] + "\",\"area\":\"" + c[i] + "\",\"father\":\"" + d[i] + "\"}]";
continue;
}*/
//q.push("{id:\""+ a[i]+"\",areaID:\‘" + b[i] + "\‘,area:\‘" + c[i] + "\‘,father:\‘" + d[i] + "\‘}");
q.push({ww: a[i], ip: b[i], area: c[i], father: d[i]});
}
/*var time = new Date().getTime(); //得到毫秒数
alert(time);
alert(new Date(time));*/
//本地数据
/* $("#list").jqGrid({
datatype:"local",//使用本地数据。
data:q,//本地数据
height:250,
colNames:[‘ww‘,‘ip‘,‘area‘,‘father‘,‘Delete‘],
colModel:[ //这一项比较重要， 其中的name属性主要是用于后期的页面代码（注意这里的范围是本页面上的代码，不会涉及到后台代码）， 而index属性是则是用于涉及后台时，给后台传递排序字段
{name:‘ww‘,index:‘ww‘,width:60,sorttype:"int",sortable:true},
{name:‘id‘,index:‘id‘,width:80,sortable:true}, //sortable是该字段是否排序
{name:‘area‘,index:‘area‘,width:180,sortorder:"desc",sortable:true},
{name:‘father‘,index:‘father‘,width:100,sortable:true} , //colModel两个最主要就是1:name前台js用,2:index给后台传递排序字段
{name:‘Delete‘,index:‘Delete‘,width:80,align:‘center‘,sortable:false}
],
autowidth: true,
//gridview: true,
pager: ‘#pager‘,
rowNum:7,
rowTotal: 1300,//一次载入最大行数
rowlist: [3, 6, 9],
sortName: ‘ww‘,
selectable:true,
rownumbers:true,
viewrecords: true,
sortorder: "asc",
caption: "loading data while scrolling",
gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接
var ids=jQuery("#list").jqGrid("getDataIDs");
for(var i=0; i<ids.length; i++){
var id=ids[i];
//这里的onclick就是调用了上面的javascript函数 Modify(id)
var rowData = $(‘#list‘).jqGrid(‘getRowData‘,id);
//dela ="<a href=‘index2.html?name="+id+"‘ style=‘color:#f60‘ >del</a>";
dela ="<button value=‘123‘ name=‘asd‘/>";
jQuery("#list").jqGrid(‘setRowData‘, ids[i], { Delete: dela });
}
}
}).navGrid("#pager",{edit:false,add:false,del:false,search:false});*/
// for(var i=0; i<mydata.length; i++) //循环给每行添加数据
// {
//
// jQuery("#list4").jqGrid("addRowData",i+1,mydata[i]);
//
// }
jQuery("#list").jqGrid({ url: ‘DataHandler.ashx‘,
datatype: "local", data:q, colNames:[‘ww‘, ‘areaID‘,‘area‘,‘father‘, ‘Delete‘],
colModel:[ //这一项比较重要， 其中的name属性主要是用于后期的页面代码（注意这里的范围是本页面上的代码，不会涉及到后台代码）， 而index属性是则是用于涉及后台时，给后台传递排序字段
{name: ‘ww‘, index:‘ww‘, width:60, sorttype: "int",sortable: true},
{name: ‘area‘,index: ‘area‘,width:80,sortable:true}, //sortable是该字段是否排序
{name: ‘ip‘, index: ‘ip‘, width:180, sortorder:"desc", sortable:true},
{name: ‘father‘,index: ‘father‘, width:100, sortable:true} , //colModel两个最主要就是1:name前台js用,2:index给后台传递排序字段
{name: ‘Delete‘, index:‘Delete‘,formatter: aaaa , width:80,align: ‘center‘, sortable:false}
],
height: 400,
autowidth: true,
width: 700,
rowNum: 3,
rowTotal: 1300,//一次载入最大行数
rowList: [13, 70, 100],
rownumbers: false,//不显示行号
loadonce: true,//一次性加载
loadtext: ‘載入中...‘,
forceFit: true,
gridview: true,
pager: ‘#pager‘,
sortname: ‘id‘,
scroll: 0,
page: 1,
viewrecords: true,//是否在浏览导航栏显示记录总数
//editurl: ‘DataHandler.ashx‘,//编辑数据发送url
sortorder: "asc",//排序
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
/*onSelectRow: function(id) {
alert(id);
},*/
/*gridComplete: function() { //在此事件中循环为每一行添加修改和删除链接
var ids = jQuery("#list").jqGrid(‘getDataIDs‘);
for (var i = 0; i < ids.length; i++) {
var c = ids[i];
//这里的onclick就是调用了上面的javascript函数 Modify(id)
del = "<a href=‘#‘ style=‘color:#f60‘ onClick=‘alert("+ c +")‘ >asd</a>";
jQuery("#list").jqGrid(‘setRowData‘, ids[i], {Delete: del});
}
},*/
grouping: false,//分组
//分组相关设置
/*groupingView: {
groupField: [‘DWJC‘],
groupColumnShow: [true],
groupText: [‘<b>{0}</b>‘],
groupCollapse: false,
groupOrder: [‘asc‘],
groupSummary: [false],
groupDataSorted: true
},*/
//表格标题
//caption: "<table><tr><td>分组:<select id=‘chngroup‘> <option value=‘clear‘>清除分组</option> <option value=‘areaID‘>单位名称</option><option value=‘area‘>日期期间</option></select></td><td><div class=‘slider‘><div class=‘slider_context‘><ul></ul></div><div class=‘btn_pre‘> </div><div class=‘btn_next‘> </div></div></div></td></tr></table>"
});
function aaaa(cellValue, options, rowObject) {
var imageHtml = "<input type=‘button‘ value=‘查看贷款申请详细‘ onclick=‘location.href=\"index2.html?name="+rowObject.ip+"\"‘/>";
return imageHtml;
}
$(function() {
$( "#draggable" ).draggable();
});
});
</script>
</html>