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

时间:2017-05-09 12:47:46

标签: jquery jqgrid free-jqgrid

下面是代码,用户选择的下拉列表在数据库中得到更新,但刷新页面后我想显示用户之前选择的数据库中的值。现在刷新页面后的单元格是空白的。帮助。

$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>

1 个答案:

答案 0 :(得分:1)

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

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

如果您使用过滤器工具栏,那么唯一需要做的就是通过调用destroyFilterToolbarfilterToolbar方法重新创建过滤器工具栏。编辑没有这样的问题。

我在版本4.14.0的https://jsfiddle.net/OlegKi/yvbt6w54/1/中引用的演示README演示了该功能。此外,该演示还展示了如何将该功能与jQuery UI Autocompleteselect2结合使用。