Jqgrid入门

ok060

已于 2024-02-24 10:41:23 修改

阅读量629

点赞数 6

文章标签：前端前端框架前端开发

于 2024-02-24 10:40:49 首次发布

本文链接：https://blog.csdn.net/ok060/article/details/136268816

版权

最近要用Jqgrid做项目，之前都没怎么接触过，看了看官网有一个小demo，于是下下来后，发现这个demo有点问题，度娘了一下，发现有的博主直接贴官网的代码，截了个图，我真是***，还是得靠自己。。。

基本配置配好之后，自己的第一个表格，样式及功能如下：

效果：

添加记录：

删除记录：

编辑记录：

查询：

整个页面代码：

<!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>

这当中还有很多参数还没有接触过，大家可以详细参考官网，总之遇到新东西（对于我来说）要静下心来学，学到老，活到老~