继续重构模块列表前端样式

app/Gdoo/CustomerCost/Controllers/AdjustController.php

@@ -29,10 +29,23 @@ class AdjustController extends AuditController
 
         $cols['actions']['options'] = [[
             'name' => '显示',
-            'action'  => 'show',
+            'action' => 'show',
             'display' => $this->access['show'],
         ]];
 
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+
+        $header['right_buttons'] = [
+            ['name' => '关闭', 'color' => 'default', 'icon' => 'fa-lock', 'action' => 'close', 'display' => $this->access['close']],
+        ];
+
+        $header['cols'] = $cols;
+        $header['tabs'] = Adjust::$tabs;
+        $header['bys'] = Adjust::$bys;
+
         $search = $header['search_form'];
         $query = $search['query'];
 
@@ -64,20 +77,6 @@ class AdjustController extends AuditController
             return Grid::dataFilters($rows, $header);
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['right_buttons'] = [
-            ['name' => '关闭', 'color' => 'default', 'icon' => 'fa-lock', 'action' => 'close', 'display' => $this->access['close']],
-        ];
-
-        $header['cols'] = $cols;
-        $header['tabs'] = Adjust::$tabs;
-        $header['bys'] = Adjust::$bys;
-        $header['js'] = Grid::js($header);
-
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/CustomerCost/Controllers/CategoryController.php

@@ -31,6 +31,13 @@ class CategoryController extends DefaultController
             'display' => $this->access['edit'],
         ]];
 
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+        $header['cols'] = $cols;
+        $header['tabs'] = Category::$tabs;
+
         $search = $header['search_form'];
         $query = $search['query'];
 
@@ -52,15 +59,6 @@ class CategoryController extends DefaultController
             return Grid::dataFilters($rows, $header);
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-        $header['cols'] = $cols;
-        $header['tabs'] = Category::$tabs;
-        $header['bys'] = Category::$bys;
-        $header['js'] = Grid::js($header);
-
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/CustomerCost/Controllers/CompenController.php

@@ -33,6 +33,15 @@ class CompenController extends AuditController
             'display' => $this->access['show'],
         ]];
 
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+
+        $header['cols'] = $cols;
+        $header['tabs'] = Compen::$tabs;
+        $header['bys'] = Compen::$bys;
+
         $search = $header['search_form'];
         $query = $search['query'];
 
@@ -64,16 +73,6 @@ class CompenController extends AuditController
             return Grid::dataFilters($rows, $header);
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['cols'] = $cols;
-        $header['tabs'] = Compen::$tabs;
-        $header['bys'] = Compen::$bys;
-        $header['js'] = Grid::js($header);
-
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/CustomerCost/Controllers/CostController.php

@@ -29,10 +29,22 @@ class CostController extends AuditController
 
         $cols['actions']['options'] = [[
             'name' => '显示',
-            'action'  => 'show',
+            'action' => 'show',
             'display' => $this->access['show'],
         ]];
 
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+        $header['right_buttons'] = [
+            ['name' => '关闭', 'color' => 'default', 'icon' => 'fa-lock', 'action' => 'close', 'display' => $this->access['close']],
+            ['name' => '费用调整单', 'color' => 'info', 'icon' => 'fa-plus', 'action' => 'create4', 'display' => $this->access['create4']],
+        ];
+        $header['cols'] = $cols;
+        $header['tabs'] = Cost::$tabs;
+        $header['bys'] = Cost::$bys;
+
         $search = $header['search_form'];
         $query = $search['query'];
 
@@ -71,25 +83,6 @@ class CostController extends AuditController
             return Grid::dataFilters($rows, $header);
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['left_buttons'] = [
-            ['name' => '批量编辑', 'color' => 'default', 'icon' => 'fa-pencil-square-o', 'action' => 'batchEdit', 'display' => $this->access['batchEdit']],
-        ];
-
-        $header['right_buttons'] = [
-            ['name' => '关闭', 'color' => 'default', 'icon' => 'fa-lock', 'action' => 'close', 'display' => $this->access['close']],
-            ['name' => '费用调整单', 'color' => 'info', 'icon' => 'fa-plus', 'action' => 'create4', 'display' => $this->access['create4']],
-        ];
-
-        $header['cols'] = $cols;
-        $header['tabs'] = Cost::$tabs;
-        $header['bys'] = Cost::$bys;
-        $header['js'] = Grid::js($header);
-
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/CustomerCost/Controllers/RebateController.php

@@ -33,6 +33,15 @@ class RebateController extends AuditController
             'display' => $this->access['show'],
         ]];
 
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+
+        $header['cols'] = $cols;
+        $header['tabs'] = Rebate::$tabs;
+        $header['bys'] = Rebate::$bys;
+
         $search = $header['search_form'];
         $query = $search['query'];
 
@@ -64,16 +73,6 @@ class RebateController extends AuditController
             return Grid::dataFilters($rows, $header);
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['cols'] = $cols;
-        $header['tabs'] = Rebate::$tabs;
-        $header['bys'] = Rebate::$bys;
-        $header['js'] = Grid::js($header);
-
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/CustomerCost/Models/Category.php

@@ -7,20 +7,9 @@ class Category extends BaseModel
     protected $table = 'customer_cost_category';
 
     public static $tabs = [
-        'name'  => 'tab',
+        'name' => 'tab',
         'items' => [
             ['value' => 'category.index', 'url' => 'customerCost/category/index', 'name' => '费用类别'],
         ]
     ];
-
-    public static $bys = [
-        'name'  => 'by',
-        'items' => [
-            ['value' => '', 'name' => '全部'],
-            ['value' => 'divider'],
-            ['value' => 'day', 'name' => '今日创建'],
-            ['value' => 'week', 'name' => '本周创建'],
-            ['value' => 'month', 'name' => '本月创建'],
-        ]
-    ];
 }

app/Gdoo/CustomerCost/views/adjust/index.blade.php

@@ -1,52 +1,43 @@
-{{$header["js"]}}
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class="list-jqgrid">
-        <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
 </div>
+
 <script>
-    (function ($) {
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
         var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.remoteDataUrl = '{{url()}}';
+
         var action = config.action;
-        var search = config.search;
-
+        // 详情页打开方式
         action.dialogType = 'layer';
+        // 双击行执行的方法
+        action.rowDoubleClick = action.show;
 
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        var setup = config.setup;
 
-        options.remoteDataUrl = '{{url()}}';
-        options.remoteParams = search.advanced.query;
-        options.columnDefs = config.cols;
-        options.onRowDoubleClicked = function (params) {
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (params.data == undefined) {
-                return;
-            }
-            if (params.data.master_id > 0) {
-                action.show(params.data);
-            }
-        };
-
-        new agGrid.Grid(gridDiv, options);
-
-        // 读取数据
-        options.remoteData({page: 1});
-
-        // 绑定自定义事件
-        var $gridDiv = $(gridDiv);
-        $gridDiv.on('click', '[data-toggle="event"]', function () {
-            var data = $(this).data();
-            if (data.master_id > 0) {
-                action[data.action](data);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>

app/Gdoo/CustomerCost/views/category/index.blade.php

@@ -1,52 +1,42 @@
-{{$header["js"]}}
-
-<div class="panel no-border" id="{{$header['table']}}-controller">
-    @include('headers')
-    <div class='list-jqgrid'>
-        <div id="{{$header['table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
 </div>
+
 <script>
-    (function ($) {
-        var table = '{{$header["table"]}}';
-        var config = gdoo.grids[table];
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
+        var table = '{{$header["master_table"]}}';
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.autoColumnsToFit = true;
+        grid.remoteDataUrl = '{{url()}}';
+
         var action = config.action;
-        var search = config.search;
+        // 双击行执行的方法
+        action.rowDoubleClick = action.edit;
 
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        var setup = config.setup;
 
-        options.remoteDataUrl = '{{url()}}';
-        options.remoteParams = search.advanced.query;
-        options.columnDefs = config.cols;
-        options.onRowDoubleClicked = function (params) {
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (params.data == undefined) {
-                return;
-            }
-            if (params.data.id > 0) {
-                action.edit(params.data);
-            }
-        };
-
-        new agGrid.Grid(gridDiv, options);
-
-        // 读取数据
-        options.remoteData({page: 1});
-
-        // 绑定自定义事件
-        var $gridDiv = $(gridDiv);
-        $gridDiv.on('click', '[data-toggle="event"]', function () {
-            var data = $(this).data();
-            if (data.master_id > 0) {
-                action[data.action](data);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>

app/Gdoo/CustomerCost/views/compen/index.blade.php

@@ -1,52 +1,43 @@
-{{$header["js"]}}
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class="list-jqgrid">
-        <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
 </div>
+
 <script>
-    (function ($) {
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
         var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.remoteDataUrl = '{{url()}}';
+
         var action = config.action;
-        var search = config.search;
-
+        // 详情页打开方式
         action.dialogType = 'layer';
-        
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        // 双击行执行的方法
+        action.rowDoubleClick = action.show;
 
-        options.remoteDataUrl = '{{url()}}';
-        options.remoteParams = search.advanced.query;
-        options.columnDefs = config.cols;
-        options.onRowDoubleClicked = function (params) {
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (params.data == undefined) {
-                return;
-            }
-            if (params.data.master_id > 0) {
-                action.show(params.data);
-            }
-        };
+        var setup = config.setup;
 
-        new agGrid.Grid(gridDiv, options);
-
-        // 读取数据
-        options.remoteData({page: 1});
-
-        // 绑定自定义事件
-        var $gridDiv = $(gridDiv);
-        $gridDiv.on('click', '[data-toggle="event"]', function () {
-            var data = $(this).data();
-            if (data.master_id > 0) {
-                action[data.action](data);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>

app/Gdoo/CustomerCost/views/cost/index.blade.php

@@ -1,18 +1,57 @@
-{{$header["js"]}}
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class="list-jqgrid">
-        <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
 </div>
-<script>
-    (function ($) {
-        var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
-        var action = config.action;
-        var search = config.search;
 
+<script>
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
+        var table = '{{$header["master_table"]}}';
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.remoteDataUrl = '{{url()}}';
+
+        var action = config.action;
+        // 详情页打开方式
         action.dialogType = 'layer';
+        // 双击行执行的方法
+        action.rowDoubleClick = function (data) {
+            if (data.master_id > 0) {
+                var index = data.master_sn.indexOf('QTFY');
+                if (index >= 0) {
+                    data.src_type_id = 46;
+                }
+                if (data.src_type_id == 46) {
+                    top.addTab('customerCost/cost/show?id=' + data.master_id, 'customerCost_cost_show', '其他费用');
+                }
+                if (data.src_type_id == 55) {
+                    top.addTab('promotion/review/show?id=' + data.src_id, 'promotion_review_show', '促销核销');
+                }
+                if (data.src_type_id == 57) {
+                    top.addTab('approach/review/show?id=' + data.src_id, 'approach_review_show', '进店核销');
+                }
+                if (data.src_type_id == 87) {
+                    top.addTab('customerCost/compen/show?id=' + data.master_id, 'customerCost_compen_show', '合同补损');
+                }
+                if (data.src_type_id == 88) {
+                    top.addTab('customerCost/rebate/show?id=' + data.master_id, 'customerCost_rebate_show', '合同返利');
+                }
+                if (data.src_type_id == 86) {
+                    top.addTab('customerCost/adjust/show?id=' + data.master_id, 'customerCost_adjust_show', '费用调整');
+                }
+            }
+        };
 
         // 关闭费用
         action.close = function(data) {
@@ -40,63 +79,16 @@
             });
         }
 
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        var setup = config.setup;
 
-        options.remoteDataUrl = '{{url()}}';
-        options.remoteParams = search.advanced.query;
-        options.columnDefs = config.cols;
-        options.onRowDoubleClicked = function (params) {
-            var data = params.data;
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (data == undefined) {
-                return;
-            }
-            if (data.master_id > 0) {
-                
-                var index = data.master_sn.indexOf('QTFY');
-                if (index >= 0) {
-                    data.src_type_id = 46;
-                }
-
-                if (data.src_type_id == 46) {
-                    top.addTab('customerCost/cost/show?id=' + data.master_id, 'customerCost_cost_show', '其他费用');
-                }
-                if (data.src_type_id == 55) {
-                    top.addTab('promotion/review/show?id=' + data.src_id, 'promotion_review_show', '促销核销');
-                }
-                if (data.src_type_id == 57) {
-                    top.addTab('approach/review/show?id=' + data.src_id, 'approach_review_show', '进店核销');
-                }
-                if (data.src_type_id == 87) {
-                    top.addTab('customerCost/compen/show?id=' + data.master_id, 'customerCost_compen_show', '合同补损');
-                }
-                if (data.src_type_id == 88) {
-                    top.addTab('customerCost/rebate/show?id=' + data.master_id, 'customerCost_rebate_show', '合同返利');
-                }
-                if (data.src_type_id == 86) {
-                    top.addTab('customerCost/adjust/show?id=' + data.master_id, 'customerCost_adjust_show', '费用调整');
-                }
-            }
-        };
-
-        new agGrid.Grid(gridDiv, options);
-
-        // 读取数据
-        options.remoteData({page: 1});
-
-        // 绑定自定义事件
-        var $gridDiv = $(gridDiv);
-        $gridDiv.on('click', '[data-toggle="event"]', function () {
-            var data = $(this).data();
-            if (data.master_id > 0) {
-                action[data.action](data);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>

app/Gdoo/CustomerCost/views/rebate/index.blade.php

@@ -1,52 +1,43 @@
-{{$header["js"]}}
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class="list-jqgrid">
-        <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
 </div>
+
 <script>
-    (function ($) {
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
         var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.remoteDataUrl = '{{url()}}';
+
         var action = config.action;
-        var search = config.search;
-
+        // 详情页打开方式
         action.dialogType = 'layer';
+        // 双击行执行的方法
+        action.rowDoubleClick = action.show;
 
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        var setup = config.setup;
 
-        options.remoteDataUrl = '{{url()}}';
-        options.remoteParams = search.advanced.query;
-        options.columnDefs = config.cols;
-        options.onRowDoubleClicked = function (params) {
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (params.data == undefined) {
-                return;
-            }
-            if (params.data.master_id > 0) {
-                action.show(params.data);
-            }
-        };
-
-        new agGrid.Grid(gridDiv, options);
-
-        // 读取数据
-        options.remoteData({page: 1});
-
-        // 绑定自定义事件
-        var $gridDiv = $(gridDiv);
-        $gridDiv.on('click', '[data-toggle="event"]', function () {
-            var data = $(this).data();
-            if (data.master_id > 0) {
-                action[data.action](data);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>

app/Gdoo/CustomerCost/views/report/saleOrderDetail.blade.php

@@ -1,7 +1,7 @@
 <div class="panel b-a" id="{{$header['master_table']}}-controller">
     @include('headers')
 
-    <div class='list-jqgrid'>
+    <div class='gdoo-list-grid'>
         <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
     </div>
 </div>