jqGrid表格插件

$(function()  
  {  
    $("#gridTable").jqGrid({  
        datatype: "local",  
        height: 250,  
        colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],  
        colModel:[  
            {name:'id',index:'id', width:60, sorttype:"int"},  
            {name:'userName',index:'userName', width:90},  
            {name:'gender',index:'gender', width:90},  
            {name:'email',index:'email', width:125,sorttype:"string"},  
            {name:'QQ',index:'QQ', width:100},        
            {name:'mobilePhone',index:'mobilePhone', width:120},          
            {name:'birthday',index:'birthday', width:100, sorttype:"date"}        
        ],  
        sortname:'id',  
        sortorder:'asc',  
        viewrecords:true,  
        rowNum:10,  
        rowList:[10,20,30],  
        pager:"#gridPager",  
        caption: "第一个jqGrid例子" 
    }).navGrid('#pager2',{edit:false,add:false,del:false});  
    var mydata = [  
        {id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},  
        {id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},  
        {id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},  
        {id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},  
        {id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},  
        {id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},  
        {id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},  
        {id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},  
        {id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}  
        ];  
    for(var i=0;i<=mydata.length;i++)  
        jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);  
    }); 


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/polaris1119/archive/2009/12/29/5089611.aspx

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html 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="css/bootstrap.min14ed.css" /> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready(function(){ $.jgrid.defaults.styleUI="Bootstrap"; var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", "url":"/asd/asda", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "1_1", "elementName": "Simple Grouping", "url":"/asd/12", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "1_2", "elementName": "May be some other grouping", "url":"/asd/14342", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "2", "elementName": "CustomFormater", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "2_1", "elementName": "Image Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true }, { "id": "2_3", "elementName": "Anchor Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true } ] }, grid; grid = jQuery("#jsonmap"); grid.jqGrid({ datastr: topicjson, datatype: "jsonstring", height: "auto", loadui: "disable", colNames: ["id","Items","url"], colModel: [ {name: "id",width:200, hidden:true, key:true}, {name: "elementName", editable:true,width:250, resizable: false}, {name: "url",width:200, editable:true,hidden:false} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "elementName", treeIcons: {leaf:'ui-icon-document-b'}, caption: "jqGrid Demos", autowidth: true, rowNum: 10000, ExpandColClick: true, jsonReader: { repeatitems: false, root: "response" }, onSelectRow: function(id){ } }); }); [removed] </head> <body> <table id="jsonmap" ></table> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值