当我添加/编辑数据时,我希望将数据保存到数据库(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?
答案 0 :(得分:0)
如果我目前了解您的第一个问题,那么您应该在“添加”和“编辑”选项中添加recreateForm: true
选项。 jqGrid的默认行为是隐藏“添加/编辑”表单。在下一次调用时,将再次显示该表单,并且将尝试调整某些属性。因此,如果用户首先单击“添加”按钮,然后单击“编辑”,则首先创建“添加表单”,然后单击“编辑”按钮,稍后jqGrid将显示Addit表单,并设置一些属性(标题,调用一些回调等)。我认为使用recreateForm: true
更安全,首先删除任何旧版本,如果存在,只有它会创建新版本。
可以使用edittype属性管理textarea
而非input
字段的使用情况:edittype: "textarea"
。