2017-02-20 1 views
0

데이터 테이블 및 yajra 패키지를 조사하는 데 꽤 많은 시간을 보냈습니다. 필자는 필자가 필요로하는 결과를 얻는 것에 더 가깝다고 말했고, 나의 초심자 접근보다는 지식 더!Laravel Yajra 데이터 테이블 사용자 정의 html/열 스타일 지정

더 나은 설명을 돕기 위해 두 개의 이미지가 첨부되어 있습니다. 첫 번째 이미지는 이미 구현 된 애플리케이션이며 두 번째는 빠른 모의로 차이점을 보여줍니다.


내가 달성을 기대하고 원하는 결과 ... enter image description here


내가 가진 본보기 ... enter image description here


나는 기본적으로 해요 기능이 필요한 각 열에 사용자 정의 html을 추가하려고합니다. 이것이 내가 그 최선의 방법을 언급하지 않았다 작동하지만

foreach ($tasks as $task) { 
    $checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>'; 
    $taskPriority = '<span class="text-info inline-block">Medium</span>'; 
      ... so on ... 
    $row = array(
     $checkBox, 
     $taskPriority, 
     ... so on ... 
    ); 
    $rows[] = $row; 
} 
$list['data'] = $rows; 
return $list; 

을 하나는이 일을 어떤 것을 더 나은 및 더 우아한 방법이 상상 : 그래서 같은 사용자 정의 배열을 반환하여 약간의 성공을 달성?

나는 yajra가 addColumn 및 editColumn 메소드를 가지고 있다는 것을 알고 있으며, 이들을 사용하여 HTML을 렌더링하는 것으로 보이는 액션 컬럼을 추가했습니다. addColumn ('action', 'blah blah ')는 html을 렌더링하지 않고 대신 행에 원시 텍스트로 표시합니다.

누군가를 도울 수있는 경우를 위해, 다음은 테이블 데이터를 얻으려는 Ajax 호출입니다.

$('#taskstable').DataTable({ 
    "processing": true, 
    "retrieve": true, 
    "serverSide": true, 
    'paginate': true, 
    'searchDelay': 700, 
    "bDeferRender": true, 
    "responsive": true, 
    "autoWidth": false, 
    "pageLength": 5, 
    "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]], 
    ajax: '/tasks/get-tasks' 
}); 

누군가가 초보자라는 스트레스를 풀 수 있기를 바랍니다. 감사.

답변

1

형 당신이 원하는 결과를 얻는 데 도움이 될 수 있습니다. 컨트롤러 :

public function index(Request $request) 
    { 
     $data = []; 
     $data['page_title'] = trans($this->trans_path . 'general.page.index.page-title'); 
     $data['show_modal'] = false; 
     $data['trans_path'] = $this->trans_path; 
     if ($request->get('add') && $request->get('add') == "true") { 
      $data['show_modal'] = true; 
     } 

     // TODO: Confirm this logic 
     //count no. of promoter admin 
     $data['promoter'] = User::where('user_type', AclHelper::getUsersTypeKey('promoter-admin'))->count(); 

     // for mapping policy 
     $data['admin_user_model'] = new AdminUser(); 

     //generate add Button 
     $data['add_btn_html'] = view($this->loadDefaultVars($this->view_path . '.partials._promoter_add_button'))->render(); 
     $data['assignable_user_roles'] = $this->getAssignableRolesByAuthUser(); 

     return view($this->loadDefaultVars($this->view_path . '.index'), compact('data')); 
    } 

    public function search(Request $request) 
    { 

     $data = []; 
     $columns = ['rud.*', 'us.first_name as promoter_first_name', 'us.last_name as promoter_last_name', 'users.email', 'users.username', 
      'r.name', 'r.display_name', 'rud.created_by', 'rud.promoter_id', 'users.enabled']; 
     $users = $this->getUserListJoinQuery($columns) 
      ->leftJoin('role_users_details as us', 'rud.promoter_id', '=', 'us.id') 
      ->groupBy('users.id'); 

     if (in_array(AclHelper::getUsersTypeKey('super-admin'), AclHelper::getUserRoles(), 1) || 
      in_array(AclHelper::getUsersTypeKey('support-admin'), AclHelper::getUserRoles(), 1) 
     ) { 
      $users->where('users.id', '!=', auth()->user()->id); 
      $data['users'] = $users->get(); 
     } else { 

      if (in_array(AclHelper::getUsersTypeKey('promoter-admin'), AclHelper::getUserRoles(), 1)) 
       $data['users'] = $users->where('rud.promoter_id', Auth::user()->id)->get(); 
      elseif (in_array(AclHelper::getUsersTypeKey('promoter-editor'), AclHelper::getUserRoles(), 1)) { 
       $promoter_id = Auth::user()->userDetail->promoter_id; 
       $users->where('r.name', '!=', AclHelper::getUsersTypeKey('promoter-editor')); 
       $data['users'] = $users->where('rud.promoter_id', $promoter_id)->get(); 
      } else { 
       return response('Unauthorized request made.', 401); 
      } 
     } 

     return Datatables::of($data['users']) 
      ->editColumn('user_id', function ($users) { 
       $data = view($this->loadDefaultVars($this->view_path . '.partials._action_fields'), compact('users'))->render(); 
       return $data; 
      }) 
      ->editColumn('profile_image', function ($users) { 
       if (!isset($users->profile_image)) { 
        return ""; 
       } 
       return '<img src="' . asset(config('neptrox.admin_user_path.thumbnail') . $users->profile_image) . 
       '" alt="' . $users->first_name . '" style="height: 40px;" >'; 
      }) 
      ->editColumn('name', function ($users) { 
       return $users->first_name . ' ' . $users->middle_name . ' ' . $users->last_name; 
      }) 
      ->editColumn('gender', function ($users) { 
       if ($users->gender === 'male') 
        return 'Male'; 
       elseif ($users->gender === 'female') 
        return 'Female'; 
       else 
        return 'Other'; 
      }) 
      ->editColumn('user_type', function ($users) { 
//    return $users->pivot->display_name; 
       return config('neptrox.admin-users-roles.' . $users->name . '.title'); 
      }) 
      ->editColumn('promoter', function ($users) { 
       return $users->promoter_first_name . ' ' . $users->promoter_last_name; 
      }) 
      ->editColumn('status', function ($users) { 
       if ($users->enabled === 1) { 
        return "<span class='text-success'> " . 
        '<i class="fa fa-check-circle-o text-info"></i>' . 
        "</span>"; 
       } 
       return "<span class='text-danger'>" . 
       '<i class="fa fa-ban text-danger"></i>' . 
       "</span>"; 
      }) 
      ->make(true); 

    } 

JQuery와 스크립트

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script> 
<script> 

    (function (options) { 

     var route_url = options.dataTableConfigVariable.route_url; 
     var columns = options.dataTableConfigVariable.columns; 
     var order = options.dataTableConfigVariable.orderColumn; 
     if (order == 'undefined' || order == null || order == "") { 
      order = 1; 
     } 
     var config = { 
      "dom": '<t>' + 
      '<"card-footer card-pagination"<"row"<"col-md-8"p><"col-md-4 form-design1 right"l>>>', 
      "oLanguage": { 
       "sLengthMenu": " _MENU_ ", 
       "sSearchPlaceholder": "Search", 
       "oPaginate": { 
        "sNext": "<span aria-hidden='true'>»</span><span class='sr-only'>Next</span>", 
        "sPrevious": "<span aria-hidden='true'>«</span><span class='sr-only'>Previous</span>" 
       }, 
      }, 
      processing: true, 
      serverSide: true, 
      ajax: { 
       type: 'POST', 
       url: route_url.dataTable_url, 
       data: { 
        _token: $('meta[name=csrf-token]').attr("content") 
       } 
      }, 
      columns: columns, 
      'order': [[order, 'asc']] 
     }; 

     //initialize dataTables 
     var table = $('table.table').DataTable(config); 

     $('#searchField').keyup(function(){ 
      table.search($(this).val()).draw() ; 
     }); 


     //Enables or disables the performer and reload the ajax after success 
     $('body').on('click', '.enableDisable', function (e) { 
      e.preventDefault(); 
      var url = $(this).attr('href'); 
      $.ajax({ 
       type: 'GET', 
       url: url, 
       success: function (response) { 
        table.ajax.reload(null, false); 
       } 
      }); 
     }); 

     //toggle all checkbox checked or unchecked 
     $('body').on('click', 'input[name="checkAll"]', function() { 
      var checkBoxes = $("input[name=checkbox\\[\\]]"); 
      checkBoxes.prop("checked", $(this).prop("checked")); 
     }); 

     //enable selected performers 
     $('body').on('click', '#enable', function (e) { 
      var url = route_url.enableAll; 
      enableDisablePerformer(e, url); 
     }); 

     //disable selected performers 
     $('body').on('click', '#disable', function (e) { 
      var url = route_url.disableAll; 
      enableDisablePerformer(e, url); 
     }); 

     function enableDisablePerformer(e, url) { 
      e.preventDefault(); 
      var formData = $('input[name^=checkbox]'); 
      var data = {}; 
      formData.each(function (index) { 
       if ($(this).is(':checked')) { 
        data[index] = $(this).val(); 
       } 
      }); 
      $.ajax({ 
       type: 'POST', 
       url: url, 
       data: { 
        _token: $('meta[name=csrf-token]').attr("content"), 
        id: data 
       }, 
       success: function (response) { 
        if (response == 'ok') { 
         table.ajax.reload(null, false); 
         $('body').find('input[name="checkAll"]').prop('checked', false); 
        } 
       } 
      }); 
     } 


     //Delete confirmation popup 
     $('body').on('click', '.try-sweet-warningConfirm', function() { 
      var id = $(this).attr('id'); 
      swal({ 
       title: "{{ trans($trans_path.'general.delete.sure') }}", 
       text: "{{ trans($trans_path.'general.delete.message') }}", 
       type: "warning", 
       showCancelButton: true, 
       confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}", 
       confirmButtonText: "{{ trans('general.button.delete') }}", 
       cancelButtonText: "{{ trans('general.button.cancel') }}", 
       closeOnConfirm: true 
      }, function (isConfirm) { 
       if (isConfirm) { 
        $.ajax({ 
         type: 'POST', 
         url: route_url.delete, 
         data: { 
          _token: $('meta[name=csrf-token]').attr("content"), 
          id: id 
         }, 
         success: function (response) { 
          table.row($(this).closest('tr')).remove().draw(); 
          if (response == 'ok') { 
           swal({ 
            title: "{{ trans($trans_path.'general.status.delete') }}", 
            text: "{{ trans($trans_path.'general.status.deleted') }}", 
            type: "success", 
            timer: 2000, 
            confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}" 
           }); 
          } 
         } 
        }); 

       } 
      }); 
     }); 

     //Delete bulk confirmation popup 
     $('body').on('click', '#delete', function() { 
      swal({ 
       title: "{{ trans($trans_path.'general.delete.sure') }}", 
       text: "{{ trans($trans_path.'general.delete.message') }}", 
       type: "warning", 
       showCancelButton: true, 
       confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}", 
       confirmButtonText: "{{ trans('general.button.delete') }}", 
       cancelButtonText: "{{ trans('general.button.cancel') }}", 
       closeOnConfirm: true 
      }, function (isConfirm) { 
       if (isConfirm) { 
        var url =route_url.delete; 
        deleteBulkPerformer(url); 
        $('body').find('input[name="checkAll"]').prop('checked', false); 
        swal({ 
         title: "{{ trans($trans_path.'general.status.delete') }}", 
         text: "{{ trans($trans_path.'general.status.deleted') }}", 
         type: "success", 
         timer: 2000, 
         confirmButtonColor: "{{ trans($trans_path.'general.delete.confirmButtonColor') }}" 
        }); 
       } 
      }); 
     }); 

     function deleteBulkPerformer(url){ 
      var formData = $('input[name^=checkbox]'); 

      var data = {}; 
      formData.each(function (index) { 
       if ($(this).is(':checked')) { 
        data[index] = $(this).val(); 
       } 
      }); 
      $.ajax({ 
       type: 'POST', 
       url: url, 
       data: { 
        _token: $('meta[name=csrf-token]').attr("content"), 
        id: data, 
        bulk: 'bulk' 
       }, 
       success: function (response) { 
        if (response == 'ok') { 
         table.row($(this).closest('tr')).remove().draw(); 
        } 
       } 
      }); 
     } 

    })({dataTableConfigVariable:dataTableConfigVariable}); 

</script> 

보기 페이지

<script> 
     var dataTableConfigVariable = { 
      route_url: { 
       dataTable_url: '{{route("admin.admin_users.search")}}', 
       enableAll: '{{route("admin.admin_users.enableAll")}}', 
       disableAll: '{{route("admin.admin_users.disableAll")}}', 
       delete: '{{route("admin.admin_users.delete")}}' 
      }, 
      columns: [ 
       {data: 'user_id', name: 'user_id', orderable: false, searchable: false}, 
       {data: 'profile_image', name: 'profile_image', orderable: false, searchable: false}, 
       {data: 'name', name: 'name'}, 
       {data: 'user_code', name: 'user_code', orderable: false}, 
       {data: 'email', name: 'email'}, 
       {data: 'username', name: 'username'}, 
       {data: 'gender', name: 'gender'}, 
       {data: 'user_type', name: 'user_type'}, 
       {data: 'promoter', name: 'promoter', orderable: false, searchable: false}, 
       {data: 'status', name: 'status', orderable: false, searchable: false}, 
      ], 
      orderColumn: 2 
     }; 
    </script> 
+0

코드를 게시하는 데 시간을내어 주셔서 감사합니다. 모바일에서 최대한 빨리 살펴보고 전체 게시물을 볼 수 없지만 솔루션을 읽을 수 있습니다 :) 감사합니다. – Birdy

0

나는 다음과 같이 대답은 게시 당시의 발견 가장 쉬운 방법, 그게 내가 받아 들일 수있는 최선의 방법이 아니라고 확신 할 수 있다고 말했고 아마도 그렇게 될 때가왔다. 나 자신보다 많은 경험을 가진 사람이라면 더 나은 솔루션을 게시 할 수 있습니다. 내 프로젝트에서


내가 찾을 수 있습니다 Laravel의 집단에서 발생한 특정 패키지를 사용하고 있습니다 : ...here..

이 패키지를 사용하면 헬퍼 클래스와 외관에 액세스 할 수 있습니다. 내 응용 프로그램과 관련된 약간의 수정을 통해이 패키지를 유용하게 사용할 수있게되었습니다.

한 유사한 접근이 작업을 수행하는 것입니다 :

가 반환 HtmlFacade :: 링크()를 사용하여

public function getTasks() 
{ 
    $tasks = $this->taskInterface->model()->all(); 
    return $this->datatables->collection($tasks) 
     ->editColumn('name', function ($model) { 
      return HtmlFacade::link("admin/tasks/{$model->id}", $model->name); 
     }) 
     ->addColumn('action', function($query) { 
      return view('backend.global.tables.actions.all-tasks-actions', compact('query')); 
     }) 
     ->make(true); 
} 

참고; 메소드 이것은 데이터 테이블에서 렌더링 된 html을 반환합니다. 메소드의 전체 목록은 문서를보고 찾거나 내 경우에는 클래스를 통해 자체 검색하고 소스 코드를 보면 나에게 패키지 이해 방법을 알려줍니다 그뿐만 아니라 클래스에 더 많은 메소드를 추가 할 수있는 능력을 제공합니다. 그래서 내가 필요한 결과를 얻으려고 왔습니다.

나는 모든 사용자 정의 클래스를 게시하지 않을 예정입니다. 앞으로 추가되는 메소드 나 패키지와 함께 제공되는 것과 매우 유사한 메소드를 미래에 지원하는 것과 관련이 없다고 생각합니다. 유일한 차이점은 onclick 자바 스크립트 이벤트를 허용하고 CSS를 기울이는 것입니다.

이 대답의 도덕적 인면은 나 자신과 유사한 위치에있는 다른 누구라도 이미이 패키지를 사용하고 있다면 가능하면 사용자 정의 HTML을 수동으로 전달하기 위해 모든 행을 배열에 캐스트 할 필요가 없다는 것을 알 수 있습니다. 보기 나는 더 이상이 작업을 수행 할 필요가 없습니다 :

대신
$rows = []; 
$checkBox = '<div class="checkbox"><input type="checkbox" value="63"><label></label></div>'; 
$taskPriority = '<span class="text-info inline-block">Medium</span>'; 
ect... As seen in original post.. 

는 사용자 정의 속성 클래스를 전달하고 laravel 집단 패키지에서 구축 할 수 있습니다, 여기에 링크 방법 laravel 집단은에 빌딩 블록이 될 수와 함께 제공입니다 사용자 정의 메소드를 패키지에 추가합니다.

public function link($url, $title = null, $attributes = [], $secure = null, $escape = true) 
{ 
    $url = $this->url->to($url, [], $secure); 

    if (is_null($title) || $title === false) { 
     $title = $url; 
    } 

    if ($escape) { 
     $title = $this->entities($title); 
    } 

    return $this->toHtmlString('<a href="' . $url . '"' . $this->attributes($attributes) . '>' . $title . '</a>'); 
} 
내가이 그렇게하지 더 나은 결과를 경우 동일한 달성의 제일과 가장 우아한 싶지 않을 것입니다 확신 말했듯이, 사람들에게 쉽게 요구 사항이 HTML 빌더를 수정하는 방법의 아이디어를 줄 것이다

나는 내 솔루션을 공유 할 것이라고 생각한 미래의 솔루션을 위해 질문을 공개 할 것입니다.

관련 문제