Jqgrid查询未运行

时间:2015-10-21 12:10:22

标签: jqgrid

我是jqgrid的新手,我创建了两个按钮,一个用于编辑,另一个用于保存已编辑的作品但是我创建的功能无法正常工作:(这将是什么原因让我知道下面的一个解决方案是我的代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        //$.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(function () {
            "use strict";
            var mydata = [
                    { id: "1",  invdate: "2007-10-01", name: "test",   note: "3note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "2",  invdate: "2007-10-02", name: "test2",  note: "3note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "3",  invdate: "2007-09-01", name: "test3",  note: "3note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "4",  invdate: "2007-10-04", name: "test4",  note: "3note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "5",  invdate: "2007-10-31", name: "test5",  note: "3note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "6",  invdate: "2007-09-06", name: "test6",  note: "3note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "7",  invdate: "2007-10-04", name: "test7",  note: "3note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "8",  invdate: "2007-10-03", name: "test8",  note: "3note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "9",  invdate: "2007-09-02", name: "test9",  note: "3note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "10", invdate: "2007-09-08", name: "test10", note: "3note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                    { id: "11", invdate: "2007-09-08", name: "test11", note: "3note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "12", invdate: "2007-09-10", name: "test12", note: "3note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                $grid = $("#list"),
                initDatepicker = function (elem) {
                    $(elem).datepicker({
                        dateFormat: "dd-M-yy",
                        autoSize: true,
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                },
                numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};

            $grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
                colModel: [
                    { name: "name", width: 65, editrules: {required: true}  },
                    { name: "invdate", width: 80, align: "center", sorttype: "date",
                        formatter: "date", formatoptions: { newformat: "d-M-Y" },
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
                    { name: "amount", width: 75, template: numberTemplate },
                    { name: "tax", width: 52, template: numberTemplate },
                    { name: "total", width: 60, template: numberTemplate },
                    {name: "closed", width: 70, align: "center", formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
                    {name: "ship_via", width: 105, align: "center", formatter: "select",
                        edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:Intim" } },
                    { name: "note", width: 60, sortable: false, search: false, edittype: "textarea" }
                ],
                cmTemplate: { editable: true },
                rowNum: 10,
                rowList: [5, 10, 20],
                pager: "#pager",
                gridview: true,
                rownumbers: true,
                autoencode: true,
                ignoreCase: true,
                sortname: "invdate",
                viewrecords: true,
                sortorder: "desc",
                shrinkToFit: false,
                height: "100%",
                loadui: "block",
                loadtext: "Processing...",
                caption: "Demonstrate how to block the grid manually"
            });
            });
    jQuery("#ed4").click( function() {
    jQuery("#list").jqGrid('editRow',"1");
    this.disabled = 'true';
    jQuery("#sved4").attr("disabled",false);
});
    jQuery("#sved4").click( function() {
    jQuery("#list").jqGrid('saveRow',"1", checksave);
    jQuery("#sved4").attr("disabled",true);
    jQuery("#ed4").attr("disabled",false);
});
function checksave(result) {
    if (result.responseText=="") {alert("Update is missing!"); return false;}
    return true;
     $(this).focus();
}
    </script>
</head>
<body>

    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
    <br />
    <input type="button" id="ed4" value="Edit row 1" />
    <input type="button" id="sved4" value="Save row 1" />
</body>
</html>

0 个答案:

没有答案