Question

我正在使用laravel 5.2框架。我已经成功实现了数据表。根据应用程序设计要求，如何在数据表单元格中实现表？

Answer 1

除非您定义自己的表并使用css对其进行样式设置，否则它不是直接可行的，如下所示

我的视图中定义的内部表格

    <style type="text/css">

     h3 {
      color: steelblue;
     }
     .subtabletable {
      display: table;
      width: 100%;
      }
    .subtable .row {
     display: table-row;
       }
    .subtable .header {
    font-weight: bold;
     }
   .subtable .cell {
    display: table-cell;
     padding: 5px;
    }

   </style>

在Html中定义我的表

   <table id="example" class="display responsive nowrap" cellspacing="0" width="100%">

我的javascript

            $(document).ready(function () {




var request = $.ajax({
                                url: "sort_respones",
                                type: "GET",
                                dataType: "html"
                                });



                     request.done(function(msg){
                         dynamicdatatable(msg);
                     });


     });

  function dynamicdatatable(mydata){
 var myData=JSON.parse(mydata) ;
 console.log(myData);
 var myColumns = [
    {
        title : "Employee",
        data : "question"
    },
    {
        title : "Type",
        data : "response_type"
    },  
    {
        title : "Responses",
        data : null,
        render : function (data, type, row, meta) {
            var subtableHtml = "<div class='subtable'>";
            subtableHtml += "<div class='row header'><span class='cell'>Response</span><span class='cell'>Occurances</span></div>";
            for (var i = 0; i < data.projects.length; i++) {
                subtableHtml += "<div class='row'>";
                subtableHtml += "<span class='cell'>" + data.projects[i].project + "</span>";
                subtableHtml += "<span class='cell'>" + data.projects[i].role + "</span>";
                subtableHtml += "</div>";
            };
            subtableHtml += "</div>";
            return subtableHtml;
        }
    }
];

$('#example').dataTable({
    searching: false,
    paging: false,
    data : myData,
    columns : myColumns,
    dom: 'Bfrtip',
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ]
     });


}

我的控制器功能

function sort_respones(Request $request){

    $results = DB::select( DB::raw("SELECT
                questions.id,
                questions.question,
                questions.client_id,
                surveys_session_answer_transactions.created_at,
                surveys_session_answer_transactions.answer_text,
                surveys_session_answer_transactions.answer_id,
                surveys_session_answer_transactions.question_text,
                questions.response_type_id,
                Count(surveys_session_answer_transactions.answer_id) AS Occurances,
                checkresponses.response,
                radioresponses.response,
                rating_bar_responses.maximum_value,
                response_types.response_type
                FROM
                questions
                INNER JOIN surveys_session_answer_transactions ON surveys_session_answer_transactions.question_id = questions.id
                LEFT OUTER JOIN checkresponses ON checkresponses.question_id = surveys_session_answer_transactions.question_id AND checkresponses.id = surveys_session_answer_transactions.answer_id
                LEFT OUTER JOIN rating_bar_responses ON rating_bar_responses.question_id = surveys_session_answer_transactions.question_id
                LEFT OUTER JOIN radioresponses ON radioresponses.question_id = surveys_session_answer_transactions.question_id AND radioresponses.id = surveys_session_answer_transactions.answer_id
                INNER JOIN response_types ON surveys_session_answer_transactions.response_type_id = response_types.type_id
                where questions.client_id=:somevariable
                GROUP BY
                surveys_session_answer_transactions.question_id,
                surveys_session_answer_transactions.answer_id"), array(
           'somevariable' => "2",
         ));

     //echo '<pre>'.print_r($results,1) .'</pre>';

           // echo '<pre>';
  //      var_dump($results);
  //      echo '</pre>'; 
     $new_question=0;
     $dataUsage=[];
     $final_array=[];
     $responses=[];
     $old_response="";$old_response_type="";
     foreach ($results as $key) {
        # code...
        if ($new_question!=$key->id) {
            # code...
            if (isset($dataUsage[0])) {
                # code...

                 array_push($final_array, array('question' =>$old_response,'response_type'=>$old_response_type,'projects' => ($responses)));
                 $responses=[];

                 //array_push($final_array, $dataUsage);
                 $dataUsage=[];
                 $responses_string="<table>";
            }
         array_push($dataUsage, array('question' => $key->question,'response_type'=>$key->response_type ));
            $old_response=$key->question;
            $old_response_type=$key->response_type;
         // $responses_string='<TR><TD>'.$key->answer_text.'</TD><TD>: '.$key->Occurances.'<br></TD></TR>';
            array_push($responses,array('project' => $key->answer_text, 'role' => $key->Occurances ));
                }else{
         // $responses_string=$responses_string.'<TR><TD>'.$key->answer_text.'</TD><TD> :'.$key->Occurances.'<br></TD></TR>';
         array_push($responses,array('project' => $key->answer_text, 'role' => $key->Occurances ));         

        }
         $new_question=$key->id;
     }
      array_push($final_array, array('question' =>$old_response,'response_type'=>$old_response_type,'projects' => ($responses)));


      // echo '<pre>';
         //  var_dump($final_array);
         //  echo '</pre>'; 
     // echo json_encode( array('data' =>$final_array ));
     // $myData = array( array('employee' =>'Bob Smith', 'projects'=>          array(array('project'=>'Alpha', 'role'=>'leader' ), array('project'=>'Alpha1', 'role'=>'leader1' ),array('project'=>'Alpha', 'role'=>'leader' ))));
     echo json_encode($final_array);
}

当然不要忘记必要的路线

数据表格单元格中的表格5.2

1 个答案: