Jqgrid入门
2019-07-16 本文已影响0人
我爱罗是个程序猿
最近要用Jqgrid做项目，之前都没怎么接触过，看了看官网有一个小demo，于是下下来后，发现这个demo有点问题，度娘了一下，发现有的博主直接贴官网的代码，截了个图，我真是***，还是得靠自己。。。
基本配置配好之后，自己的第一个表格，样式及功能如下：
效果.png
增.png
删.png
改.png
查.png
整个页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- jqGrid组件基础样式包-必要 -->
<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
<!-- jqGrid主题包-非必要 -->
<!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果 -->
<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
<!-- jquery插件包-必要 -->
<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<!-- jqGrid插件包-必要 -->
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
<!-- jqGrid插件的多语言包-非必要 -->
<!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<title></title>
<!-- 本页面初始化用到的js包，创建jqGrid的代码就在里面 -->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<table id="list4"></table>
<div id="pager" ></div>
<script>
$(function () {
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames: ['序号', '时间', '顾客', '金额', '数量', '总计', '备注'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int", editable: true },
{ name: 'invdate', index: '时间', width: 90, sorttype: "date", editable: true },
{ name: 'name', index: 'name', width: 100, editable: true },
{ name: '金额', index: '金额', 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: "操作数组数据"//相当于标题
});
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "张三", note: "note", 金额: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "李四", note: "note2", 金额: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "李飞", note: "note3", 金额: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "鸣人", note: "note", 金额: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "路飞", note: "note2", 金额: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "佐助", note: "note3", 金额: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "路人甲", note: "note", 金额: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "路人甲", note: "note2", 金额: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "路人甲", note: "note3", 金额: "400.00", tax: "30.00", total: "430.00" },
{ id: "10", invdate: "2007-10-01", name: "路人甲", note: "note", 金额: "200.00", tax: "10.00", total: "210.00" },
{ id: "11", invdate: "2007-10-02", name: "路人甲", note: "note2", 金额: "300.00", tax: "20.00", total: "320.00" },
{ id: "12", invdate: "2007-09-01", name: "路人甲", note: "note3", 金额: "400.00", tax: "30.00", total: "430.00" },
{ id: "13", invdate: "2007-10-04", name: "路人甲", note: "note", 金额: "200.00", tax: "10.00", total: "210.00" },
{ id: "14", invdate: "2007-10-05", name: "路人甲", note: "note2", 金额: "300.00", tax: "20.00", total: "320.00" },
{ id: "15", invdate: "2007-09-06", name: "路人甲", note: "note3", 金额: "400.00", tax: "30.00", total: "430.00" },
{ id: "16", invdate: "2007-10-04", name: "路人甲", note: "note", 金额: "200.00", tax: "10.00", total: "210.00" },
{ id: "17", invdate: "2007-10-03", name: "路人甲", note: "note2", 金额: "300.00", tax: "20.00", total: "320.00" },
{ id: "18", invdate: "2007-09-01", name: "路人甲", note: "note3", 金额: "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>
</body>
</html>
这当中还有很多参数还没有接触过，大家可以详细参考官网，总之遇到新东西（对于我来说）要静下心来学，学到老，活到老~
