在 Jqgrid 中如何显示用户通过内联编辑在数据库中更新的下拉值

Question

下面是代码，在此代码中，用户选择的下拉列表正在数据库中更新，但是刷新页面后我想显示用户 previously.now 在刷新后选择的数据库中的值单元格所在的页面 blank.kindly help.

$qr="SELECT id,`emp_id`,`emp_name`, `att_date`, `emp_join_date`, `intime`,`outtime`,`Total_Hours`,`OT Hours`,`Status` FROM `db_emp_attendance` WHERE Status='Absent' and att_date='2017-04-01'";
$q = mysql_query($qr);
$rows = array();
while($r = mysql_fetch_assoc($q)) {
    $rows[] = $r;
}
$json_data=json_encode($rows);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/ecmascript" src="jquery.min.js"></script>
    <script type="text/ecmascript" src="jquery.jqGrid.min.js"></script>
    <script type="text/ecmascript" src="grid.locale-en.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css"/>
    <meta charset="utf-8" />
</head>
<body>

<table id="rowed5"></table>

<script type="text/javascript"> 
var lastsel2
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 400,
autowidth: true,
colNames:['ID','Emp ID','Name', 'Join Date','Attendance Date', 'Time In','Time Out','Total Hours','OT Hours','Status','leave_type'],
colModel:[
{name:'id',index:'id', width:75,align:"center",key: true},
{name:'emp_id',index:'emp_id', width:75,align:"center"},
{name:'emp_name',index:'emp_name', width:150,align:"left"},
{name:'emp_join_date',index:'emp_join_date', width:150,align:"center"},
{name:'att_date',index:'att_date', width:100, align:"center"},      
{name:'intime',index:'intime', width:80,align:"center"},        
{name:'outtime',index:'outtime', width:80,align:"center"},
{name:'Total_Hours',index:'Total_Hours', width:80,align:"center"},
{name:'OT Hours',index:'OT Hours', width:80,align:"center"},
{name:'Status',index:'Status', width:150,align:"center"},
    {name:'leave_type',index:'leave_type', width:150, 
    sortable:false,editable: true,
edittype: "select",
editoptions: {
value: "SickLeave:SickLeave;DayOff:DayOff;Vacation:Vacation"}
}
],

onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
jQuery('#rowed5').jqGrid('editRow',id,true);
lastsel2=id;
}
},
editurl:'update.php',
    cellEdit : true,
        cellsubmit : 'remote',
        cellurl : 'update.php',
        caption: "Attendance"

});
var mydata2 =<?PHP echo $json_data;?>;
for(var i=0;i < mydata2.length;i++)
 jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
 </script>
</body>
</html>

Answer 1

免费的 jqGrid 4.14.0 允许基于网格的所有数据生成 editoptions.value 或 editoptions.value。列中的设置可能类似于

edittype: "select",
editoptions: { generateValue: true },
stype: "select",
searchoptions: {
    sopt: ["eq", "ne"],
    generateValue: true,
    noFilterText: "Any"
}

如果您使用过滤器工具栏，那么唯一需要另外做的就是通过调用 destroyFilterToolbar 和 filterToolbar 方法重新创建过滤器工具栏。编辑没有这个问题。

演示 https://jsfiddle.net/OlegKi/yvbt6w54/1/, which I referenced in the README of the version 4.14.0, demonstrates the feature. Moreover, the demo shows how one can combine the feature with jQuery UI Autocomplete and select2.

在 Jqgrid 中如何显示用户通过内联编辑在数据库中更新的下拉值

in Jqgrid how to show dropdown value which was updated in database by user by inline edit

jquery

jqgrid

free-jqgrid