PHP jqGrid可以编辑添加/编辑表单属性吗?

时间:2014-08-22 07:51:02

标签: php jqgrid

当我添加/编辑数据时,我希望将数据保存到数据库(MySQL)中。下面是我的jqgrid:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
          type="text/css" rel="Stylesheet" />
    <link href="/css/style.css" type="text/css" rel="Stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script src="/js/custom.js"></script>
    <link rel='stylesheet' type='text/css' href='http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css' />
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js'></script>        
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js'></script>
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js'></script>
<script>
$(document).ready(function() {
    $("#myDataList").jqGrid({
        url: "<?= base_url(); ?>getmydata",
        datatype: "json",
        autowidth: true,
        mtype: "GET",
        colNames: ["Date", "Description", "Category", "Debit", "Credit", "Type", "Amount"],
        colModel: [{
            name: "transactiondate",
            editable: true,
            editrules: {
                date: true
            },
            formatter: 'date',

            formatoptions: {
                srcformat: "Y-m-d",
                newformt: "Y-m-d"
            },
            width: 1
        }, {
            name: "description",
            editable: true,
            width: 3
        }, {
            name: "category",
            editable: true,
            width: 1
        }, {
            name: "debit",
            sort: false,
            formatter: 'number',
            width: 1
        }, {
            name: "credit",
            sort: false,
            formatter: 'number',
            width: 1
        }, {
            name: "type",
            editable: true,
            hidden: true,
            editrules: {
                edithidden: true
            },

            formatter: function(cellvalue) {
                if (cellvalue == 'W') {
                    return 'Withdraw';
                } else if (cellvalue == 'D') {
                    return 'Deposit';
                } else {
                    return '';
                }
            },
            edittype: 'custom',
            editoptions: {
                custom_element: radioelem,
                custom_value: radiovalue
            }

        }, {
            name: "amount",
            editable: true,
            hidden: true,
            editrules: {
                edithidden: true
            }
        }],
        pager: "#myDataListPager",
        rowNum: 10,
        rowList: [10, 20],
        sortname: "transactiondate",
        sortorder: "desc",
        height: 'auto',
        viewrecords: true,
        gridview: true,
        caption: "",
        editurl: "<?= base_url(); ?>getmydata/action",
    });
    jQuery("#myDataList").jqGrid('navGrid', '#myDataListPager', {
        add: true,
        edit: true,
        del: true,
        search: true
    }, { //prmEdit
        closeAfterEdit: true,
        afterSubmit: function() {}
    }, { //prmAdd
        closeAfterAdd: true,
        afterSubmit: function() {}
    });
});

<table id="myDataList"></table>
<div id="myDataListPager"></div>

我现在的问题是在编辑或添加后,表单不会关闭。也可以重新调整添加/编辑表单宽度和输入宽度,例如,我想将描述输入为textarea而不是textfield?

1 个答案:

答案 0 :(得分:0)

如果我目前了解您的第一个问题,那么您应该在“添加”和“编辑”选项中添加recreateForm: true选项。 jqGrid的默认行为是隐藏“添加/编辑”表单。在下一次调用时,将再次显示该表单,并且将尝试调整某些属性。因此,如果用户首先单击“添加”按钮,然后单击“编辑”,则首先创建“添加表单”,然后单击“编辑”按钮,稍后jqGrid将显示Addit表单,并设置一些属性(标题,调用一些回调等)。我认为使用recreateForm: true更安全,首先删除任何旧版本,如果存在,只有它会创建新版本。

可以使用edittype属性管理textarea而非input字段的使用情况:edittype: "textarea"