Jqgrid Toolbar

最新推荐文章于 2022-08-30 09:51:51 发布

ITBOY_ITBOX

最新推荐文章于 2022-08-30 09:51:51 发布

阅读量3k

点赞数

分类专栏： Jqgrid

本文链接：https://blog.csdn.net/m0_37294838/article/details/59173255

版权

Jqgrid 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jqgrid+button测试</title>

    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>

    <link href="../js/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
    <link href="../js/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">
        $(function () {
            $( "button" ).button({
                icons: {
                    primary: "ui-icon-plus"
                }
            }).next().button({
                icons: {
                    primary: "ui-icon-minus"
                }
            });
            // master grid
            $("#jqGrid").jqGrid({
                url: '../data.json',
                datatype: "json",
                colModel: [
                    { label: 'ID', name: 'CustomerID', key: true, width: 75 },
                    { label: 'Company Name', name: 'CompanyName', width: 150 },
                    { label: 'Contact Name', name: 'ContactName', width: 150 },
                    { label: 'Phone', name: 'Phone', width: 150 },
                    { label: 'City', name: 'City', width: 150 }
                ],
                width: 780,
                height: 150,
                rowNum: 7,
                viewrecords: true,
                loadonce: true,
             /*   caption: 'Master Grid',*/
                toolbar:[true,"top"],
                onSelectRow: function(rowid, selected) {
                    if(rowid != null) {
                        jQuery("#jqGridDetails").jqGrid('setGridParam',{url: rowid+".json",datatype: 'json'}); // the last setting is for demo only
                        jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid::'+rowid);
                        jQuery("#jqGridDetails").trigger("reloadGrid");
                    }
                },
                pager: "#jqGridPager"
            });
            $("#jqGrid").navGrid('#jqGridPager', { add: false, edit: false, del: false,
                search: false,refresh:false
            }) .navButtonAdd('#jqGridPager',
                    {
                        caption: "Refresh",
                        onClickButton:function() {
                            Refresh(); return false; },
                        position: "last",
                        buttonicon:"ui-icon-refresh"
                    }).navButtonAdd('#jqGridPager',
                    {
                        caption: "Search",
                        onClickButton:function() {
                            Refresh(); return false; },
                        position: "last",
                        buttonicon: "ui-icon-search"
                    })
                    .navButtonAdd('#jqGridPager',
                            {
                                caption: "Save",
                                onClickButton:function() {
                                    Save(); return false; },
                                position: "last"
                            })
                    .navButtonAdd('#jqGridPager',
                            {
                                caption: "Back",
                                onClickButton:function() { redirectBack(); return false; },
                                position: "last"
                            });
           /* $("#btn").insertBefore("#jqGrid");*/
            /*$("#btn").insertBefore("#t_jqGrid");*/
            $("#t_jqGrid").css({"height":30});
            $("#btn").appendTo("#t_jqGrid");

        });


    </script>
</head>

<body>
<div id="btn">
    <button>Add</button>
    <button>Delete</button>
</div>
<div style="margin-left:8px;">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
</body>
</html>
Jqgrid Toolbar - 892847834 - ITBOX的博客