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="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);
        }
        //--------------------------------------------------------------------------------------------