easyui-datagrid 主从表(一对多)表结构，明细在前端存json，一键保存至数据库
效果图:
这里主要说一下 明细表的 easyui-datagrid 可编辑的功能
Html
<input id='task_detail_list_complaint' name='task_detail_list_complaint' type="hidden" value="" /> <table id="grid_task_detail_complaint" style="width:1150px;height:230px" data-options="iconCls:'icon-edit',singleSelect:true" title="投诉任务单" rownumbers='true' ><!-- height:auto --> <thead> <tr > <th data-options="field:'task_detail_detail_name', align:'center',formatter:productFormatter, editor:{ type:'combobox', options:{ valueField:'productid', textField:'name', data:products, editable:false, required:true } }" width='150' >下发部门</th> <th data-options="field:'task_detail_detail_description' ,align:'center',editor:'textarea' " width='950' >描述</th> </tr> </thead> </table>
Javascript
一、初始化及下拉菜单的赋值
<script>
//订单明细-----------------------------------------------------------------------------------
var products = [
/*
{productid:'鲜奶',name:'鲜奶'},
{productid:'酸奶',name:'酸奶'},
{productid:'巴氏酸',name:'巴氏酸'}
*/
<{$task_belongs_unit}>
];
function productFormatter(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return value;
}
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#grid_task_detail_complaint').datagrid('validateRow', editIndex)){
$('#grid_task_detail_complaint').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//确认
function acceptChanges(){
$('#grid_task_detail_complaint').datagrid('acceptChanges');
}
$(function(){
var lastIndex;
$('#grid_task_detail_complaint').datagrid({
toolbar:[{
text:'新增',
iconCls:'icon-add',
handler:function(){
if (endEditing()){
$('#grid_task_detail_complaint').datagrid('endEdit', lastIndex);
$('#grid_task_detail_complaint').datagrid('appendRow', {});
lastIndex = $('#grid_task_detail_complaint').datagrid('getRows').length-1;
$('#grid_task_detail_complaint').datagrid('selectRow', lastIndex);
$('#grid_task_detail_complaint').datagrid('beginEdit', lastIndex);
//赋默认值
//$('#grid_task_detail_complaint').datagrid('appendRow',{task_detail_detail_description:'P1111111111'});
//$('#grid_task_detail_complaint').datagrid('appendRow',{task_detail_detail_name:'运营管理部'});
//新增
editIndex = $('#grid_task_detail_complaint').datagrid('getRows').length-1;
//$('#grid_task_detail_complaint').datagrid('selectRow', editIndex)
// .datagrid('beginEdit', editIndex);
}
}
},'-',{
text:'删除',
iconCls:'icon-remove',
handler:function(){
var row = $('#grid_task_detail_complaint').datagrid('getSelected');
if (row){
var index = $('#grid_task_detail_complaint').datagrid('getRowIndex', row);
$('#grid_task_detail_complaint').datagrid('deleteRow', index);
}
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#grid_task_detail_complaint').datagrid('endEdit', lastIndex);
$('#grid_task_detail_complaint').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
});
</script>
其中 <{$task_belongs_unit}> 为后端 读数据库获取 并整理成 下面的 字符串
{productid:'鲜奶',name:'鲜奶'},
{productid:'酸奶',name:'酸奶'},
{productid:'巴氏酸',name:'巴氏酸'}
php的写法
$strSql="SELECT value_name FROM item_value where deleted=0 and value_name<>'' and item_name='"."投诉所属单位"."' order by orderby asc "; //order by date_entered asc //echo($strSql); $result_rows=$db->query($strSql); while($row=mysql_fetch_array($result_rows)){ //echo($row[0]); $option.="{productid:'".$row[0]."',name:'".$row[0]."'},"; } //echo($option); $option =substr($option,0,strlen($option)-1); //echo($option); $smarty->assign('task_belongs_unit', $option);
二、点击保存时 下拉菜单 和 文本框不能为空
$('#grid_task_detail_complaint').datagrid('acceptChanges');//退出编辑模式
var rows = $('#grid_task_detail_complaint').datagrid('getRows');
for ( var i = 0; i < rows.length; i++) {
//alert(rows[i].task_detail_detail_name);
if(rows[i].task_detail_detail_name=="" || rows[i].task_detail_detail_name==undefined){
$.messager.alert('消息','任务单的下发部门不能为空！','info');
return;
}
if(rows[i].task_detail_detail_description=="" || rows[i].task_detail_detail_description==undefined ){
$.messager.alert('消息','任务单的描述不能为空！','info');
return;
}
}
三、保存，将datagrid中的数据库转为json存在input中 提交
//明细---------------------------------------------------------- //关闭编辑 状态 var rows = $('#grid_task_detail_complaint').datagrid('getRows'); //alert(rows.length); for ( var i = 0; i < rows.length; i++) { $('#grid_task_detail_complaint').datagrid('endEdit', i); } if(rows.length>0){ //alert('4444' ); var order_form_detail_row = $('#grid_task_detail_complaint').datagrid('getRows'); //取表格的所有数据 //alert('1212'); var task_detail_list_complaint=JSON.stringify(order_form_detail_row); //alert(task_detail_list_complaint); $("#task_detail_list_complaint").val(task_detail_list_complaint); //alert('33333'); } //alert($("#task_detail_list_complaint").val());
四、后端php取值
task_detail_list_complaint 为 input标签 用于 存放 已转为json的datagrid表格中的数据
//明细表 ---------------------------------------------------- $task_detail_list=json_decode($_POST['task_detail_list_complaint']); for( $i=0; $i<count($task_detail_list); $i++){ $task_belongs_unit=$task_detail_list[$i]->task_detail_detail_name;//任务名称 下发部门 运营管理部 $task_description=$task_detail_list[$i]->task_detail_detail_description;//任务描述 $task_id=CreateGUID(); $created_by="PC"; $task_type="";//暂时没用上 $task_status="已下发"; $work_order_type="投诉"; $task_name="投诉"; $send_date=$date_entered;//下发时间 $sql_detail="insert into jc_task (id,date_entered,date_modified,assigned_user_id,modified_user_id,created_user_id,created_by,name,description,deleted," ; $sql_detail.=" assigned_user_name,modified_user_name,created_user_name,"; $sql_detail.=" type,status,work_order_id,work_order_type,send_date,belongs_unit "; $sql_detail.=" ) values( "; $sql_detail.=" '{$task_id}','{$date_entered}','{$date_entered}','{$assigned_user_id}','{$assigned_user_id}','{$assigned_user_id}','{$created_by}', "; $sql_detail.=" '{$task_name}','{$task_description}','0', "; $sql_detail.=" '{$assigned_user_name}','{$assigned_user_name}','{$assigned_user_name}', "; $sql_detail.=" '{$task_type}','{$task_status}' ,'{$work_order_id}','{$work_order_type}','{$send_date}','{$task_belongs_unit}' "; $sql_detail.=" )"; $result_detail = $db->execute($sql_detail);//订单明细表order_form_detail 添加 //WriteLog($sql_detail); } //--------------------------------------------------------------------------------------------
