您可以在 Bootstrap 容器内的自由 jqGrid 网格上使用可排序的 JQuery UI 吗？

问题描述

我在 Bootstrap 容器中有三个免费的 jqgrid 网格。我需要使其中一个网格可排序。

我认为 CCS / JS 文件之间肯定存在冲突，因为我无法让网格接受可排序选项。 （即使是普通的示例也不适用于我的 CSS/JS 文件。有人指出我哪里出错了吗？你甚至可以在 Bootstrap 容器中使用可排序的 Jquery UI 吗？

谢谢

$(function () {
    "use strict";
    $("#truck_load").jqgrid({
        url:"ajax_get_truck_loads_for_grid.PHP",caption:"Truck load for journey: ",datatype: "json",mtype: "GET",sortable:true,guiStyle: "bootstrap4",colModel: [
            {name: "b_id",hidden:false,align: "left",label:"Job number"},{name: "c_or_d",label:"C or D"},{name: "manifested",label:"Printed"},{name: "job_code",label:"Job type"},{name: "delivery_town",label:"Town"},{name: "delivery_postcode",label:"Post code"},{name: "delivery_additions",label:"Surch"},{name: "collection_town",{name: "collection_postcode",{name: "collection_additions",label:"Surch"}                        
        ]        
    });
});

jQuery( "#truck_load").jqgrid('sortableRows');

我有一些附加到这个项目的 CSS 和 JS 文件。

    <link href="css/wms.css" rel="stylesheet" type="text/css">
    <link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui.structure.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="css/print.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min_4_4_0.css">
    <link href="css/menu.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/additional-methods.min.js"></script>
    <script src="js/jquery.datetimepicker.full.min.js"></script>
    <script src="js/print.min.js"></script>
    <script src="//cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/fontawesome.js"></script>
    <script src="js/tms_common_functions.js"></script>
    <script src="js/bootBox.js"></script>
    <script src="js/bootstrap3-typeahead.js"></script>

The grids are inside this HTML 

    <div class="container-fluid ml-2 mt-0 mb-2 p-2 shadow bg-white" id="loading_container">
        <form name='f2' id='f2' class="form">                
            <div class="form-group row main" >            
                <div class="col-md-6" id="avail_jobs_container">                
                    <table id="available_jobs"></table>              
                </div>    
                <div class="col-md-6">                
                    <div class="col-md-12" id="tj">                
                    <table id="truck_journeys"></table>              
                    </div>
                    <hr>
                    <div class="col-md-12">                
                    <table id="truck_load"></table>              
                    </div>                
                </div>    
            </div>          
        </form>    
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）