juery.jqgrid新建demo

最新推荐文章于 2024-08-13 08:16:31 发布

cavalier丶

最新推荐文章于 2024-08-13 08:16:31 发布

阅读量1.9k

点赞数

分类专栏：前端框架 jqgrid

本文链接：https://blog.csdn.net/qq_24524781/article/details/50104479

版权

前端框架同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jqgrid

2 篇文章 0 订阅

订阅专栏

基本配置好了以后，使用jqgrid创建第一个表格。样式如下图：

页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<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/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">

<style>
html, body {
	margin: 0;
	padding: 0;
	font-size: 75%;
}
</style>

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>



<script type="text/javascript">
$(document).ready(
   function() {
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
    {name:'id',index:'id', width:60, sorttype:"int",editable:true},
    {name:'invdate',index:'invdate', width:90, sorttype:"date",editable:true},
    {name:'name',index:'name', width:100,editable:true},
    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float",editable:true},
    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",editable:true},
    {name:'total',index:'total', width:80,align:"right",sorttype:"float",editable:true},
    {name:'note',index:'note', width:150, sortable:false,editable:true}
    ],
	pager: 'pager', //分页工具栏  
	rowNum:10, //每页显示记录数 
	viewrecords: true, //是否显示行数 
	rowList:[10,20,30], //可调整每页显示的记录数 
    multiselect: true,
    caption: "Manipulating Array Data"
  });
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
jQuery("#list4").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true});
});

</script>

</head>
<body class="container">

<table id="list4"></table>
<div id="pager" ></div> 



<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

在这里引入了bootstrap配合jqgrid开发。。

前几天引入jqgrid一直出问题，最后发现是犯了很脑残的错误，前端的这些插件相当的方便，使用起来也异常的舒适。。

还是要静下心来去学习一些东西才能有所得，虽然我现在是菜狗，可不代表一辈子都是菜狗，加油把，小白们（我也是）。