效果图:
这里主要说一下 明细表的 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);
}
//--------------------------------------------------------------------------------------------