jqGrid：五、 Form Editing

最新推荐文章于 2021-04-08 18:01:09 发布

tanlingcau

最新推荐文章于 2021-04-08 18:01:09 发布

阅读量297

点赞数

分类专栏： Javascript 文章标签： json jQuery Servlet HTML XHTML ViewUI

本文链接：https://blog.csdn.net/tanlingcau/article/details/83728366

版权

Javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>grid.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
        <meta http-equiv="description" content="this is my page" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/redmond/jquery-ui-1.8.2.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/ui.multiselect.css" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/jquery.searchFilter.css" />
        <style>
html,body { -
    -margin: 0; /* Remove body margin/padding */
    padding: 0;
    overflow: hidden; /* Remove scroll bars on browser window */
    font-size: 75%;
}
</style>

        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
        <script src="js/src/ui.multiselect.js" type="text/javascript"></script>
        <script src="js/src/grid.loader.js" type="text/javascript"></script>
        <script type="text/javascript">
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
        </script>
        <script type="text/javascript">
            $(function(){ 
              $("#grid_id").jqGrid({
                url:'/demo2/servlet/JqGridJsonServlet',
                mtype: 'GET',
                datatype: 'json',
                jsonReader : {
                    id: "invId",//the unique id of the row.如果不设置则默认为行号.
                    repeatitems: false
                    //element tells jqGrid that the information for the data in the row is repeatable - i.e. the elements have the same tag cell described in cell element. Setting this option to false instructs jqGrid to search elements in the json data by name. This is the name from colModel or the name described with the jsonmap option in colModel.
                    //A very useful feature here is that there is no need to include all the data that is represented in colModel. Since we make a search by name, the order does not need to match the order in colModel.
                    //设置为false，则可以在json串中根据列/值为传数据，并且列/值在json串中的位置可以随意，也可以不传。 
                },
                height: "auto",
                loadui: "disable",
                colNames:['Inv No','Date', 'ClientId', 'Amount','Tax','Total','Notes'],
                colModel :[ 
                  {name:'invId', index:'invId', width:70}, 
                  //name:Set the unique name in the grid for the column. This property is required. As well as other words used as property/event names, the reserved words (which cannot be used for names) include subgrid, cb and rn.
                  //index:Set the index name when sorting. Passed as sidx parameter.index是后台排序时使用。
                  {name:'invDate', index:'invDate', width:120, editable:true}, 
                  {name:'client_Id', index:'client_Id', width:120, editable:true}, 
                  {name:'amount', index:'amount', width:90, align:'right', editable:true}, 
                  {name:'tax', index:'tax', width:90, align:'right', editable:true}, 
                  {name:'total', index:'total', width:90, align:'right', editable:true}, 
                  {name:'note', index:'note', width:180, sortable:false, editable:true} 
                ],
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'invid',
                sortorder: 'asc',
                viewrecords: true,
                caption: 'My first grid'
              });
              //jQuery("#grid_id").jqGrid('navGrid','#pager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView)
              jQuery("#grid_id").jqGrid('navGrid','#pager',{add:true,edit:true,view:true,del:true,search:true,refresh:true},
                  {url:'/demo2/servlet/JqGridJsonServlet',closeAfterEdit:true, closeOnEscape:true, left:240}, // settings for edit
                {url:'/demo2/servlet/JqGridJsonServlet',closeAfterAdd:true, closeOnEscape:true, left:240}, // settings for add
                {url:'/demo2/servlet/JqGridJsonServlet',closeAfterEdit:true, closeOnEscape:true, top:90, left:240, resize:false, drag:false},  // settings for del
                {multipleSearch:true, closeOnEscape:true}, // enable the advanced searching
                {closeOnEscape:true, left:240} // allow the view dialog to be closed when user press ESC key
              );
            }); 
        </script>
    </head>
    <body>
        <table id="grid_id"></table>
        <div id="pager"></div>
    </body>
</html>

tanlingcau

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jqGrid：五、 Form Editing

[code="html"] grid.html html,body { - -margin: 0; /* Remove body margin/padding */ padding...
复制链接

扫一扫

专栏目录