当前位置：网站首页>JQGrid通过json请求nodejs数据，表格信息保存在mysql数据库中

JQGrid通过json请求nodejs数据，表格信息保存在mysql数据库中

2022-08-08 21:22:00 【lhf2112】

1、JQGrid对JSON的格式要求比较严格，对于非JQGrid标准的JSON格式，jsonReader的repeatitems属性一定要设置为false;

前端country.html的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>国籍字典</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/theme.css" />
</head>
<body>


<table id="grid-table"></table>

<div id="grid-pager"></div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> jQuery.jgrid.useJSON = true; </script>
<script type="text/javascript">
//当 datatype 为"local" 时需填写

var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";

$(document).ready(function() {
$("#grid-table").jqGrid({
   url : 'http://127.0.0.1:8888/',
   datatype: "json",
   cellsubmit: "clientArray",
   height: 250, //高度，表格高度。可为数值、百分比或'auto'
   //mtype:"GET",//提交方式
   colNames: ['ID', 'Name', 'State'],
   colModel: [{
       name: 'id',
       index: 'id', //索引。其和后台交互的参数为sidx
       key: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
       width: 100,
       editable: false,
       editoptions: {
           size: "20",
           maxlength: "30"
       }
       }, {
           name: 'Name',
           index: 'Name',
           width: 150,
           editable: true,
           editoptions: {
           size: "20",
           maxlength: "30"
       }
       },{
           name: 'State',
           index: 'State',
           width: 150,
           editable: true,
           editoptions: {
           size: "20",
           maxlength: "30"
       }
       }, ],
   viewrecords: true, //是否在浏览导航栏显示记录总数
   loadonce: false,
   rowNum: 10, //每页显示记录数
   rowList: [5, 10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
   pager: pager_selector, //分页、按钮所在的浏览导航栏
   altRows: true, //设置为交替行表格,默认为false
   //toppager: true,//是否在上面显示浏览导航栏
   multiselect: true, //是否多选
   //multikey: "ctrlKey",//是否只能用Ctrl按键多选
   multiboxonly: true, //是否只能点击复选框多选
   // subGrid : true,
   //sortname:'id',//默认的排序列名
   //sortorder:'asc',//默认的排序方式（asc升序，desc降序）
   caption: "国籍字典表", //表名
   autowidth: true, //自动宽
   jsonReader: {
                    root:"rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false
                },
   loadonce: false

});
//---------------------------------------------------------------


//浏览导航栏添加功能部分代码
$(grid_selector).navGrid(pager_selector, {
search: true, // 检索

add: true, //添加（只有editable为true时才能显示属性）
addtext: "添加",
edit: true, //修改（只有editable为true时才能显示属性）
edittext: "修改",
del: true, //删除
deltext: "删除",
//---------------------------------------------------------------
delfunc :function(){
           var id = $("#grid-table").jqGrid("getGridParam", "selrow");
           $("#grid-table").jqGrid('delRowData', id);
       },
addfunc :function(){
   var selectedId = $("#grid-table").jqGrid("getGridParam", "selrow");

    var dataRow = {
        id : 99,
        type : "Zhang",
        pay : "San",
        name : "[email protected]",
        text : "0086-12345678"
    };

    if (selectedId) {
        $("#grid-table").jqGrid("addRowData", 99, dataRow, "before", selectedId);

    } else {
        $("#grid-table").jqGrid("addRowData", 99, dataRow, "first");

    }

},
//---------------------------------------------------------------
refresh: true //刷新
}, {}, // edit options
{}, // add options
{
function(){
   var id = $("#grid-table").jqGrid("getGridParam", "selrow");
   $("#grid-table").jqGrid('delRowData', id);
}
}, // delete options
{
multipleSearch: true
} // search options - define multiple search
});
</script>
</body>
</html>