jqGrid：五、 Form Editing

tanlingcau

浏览: 138738 次
性别:
来自: 北京

最近访客更多访客>>

49616664

blue_hr

周凡1981

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

json jQuery Servlet HTML XHTML

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

分享到：

jqGrid：六、 search | jqGrid：四、 remote data(JSON)

2010-10-09 11:03
浏览 1803
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jqGrid：五、 Form Editing

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jqGrid：五、 Form Editing

评论

发表评论

相关推荐

select box的操作

利用js对象去除数组重复

Javascript Returns Zero For parseInt('08') and parseInt('09')

jqGrid：六、 search

jqGrid：四、 remote data(JSON)

jqGrid：三、 remote data(XML)

jqGrid：二、 第一个jqGrid

jqGrid：一、 环境搭建

jqGrid问题

鼠标形状样式

禁用IE缓存

Javascript中的命名规范

工作笔记：JsonStore无法正常加载

工作笔记：ExtjsGrid数据拖拽页面无法加载

Ext.form timeout参数

Extjs 开发环境下store不加载数据

检测浏览器是否支持JavaScript功能

页面Size

Ext tbar的多行显示

在IE中使用Extjs出现“拒绝访问”

最近访客更多访客>>

jqGrid：二、第一个jqGrid

jqGrid：一、环境搭建