Uncaught TypeError: $(...).jsGrid is not a function

Question

在我的页面中，我正在尝试创建一个 jsgrid table我认为没有错，因为我以正确的方式导入了东西，但它给了我这个；

Uncaught TypeError: $(...).jsGrid is not a function error

有什么问题吗，因为我没有看到初始化 table 有任何错误？

这是我的代码：

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="assets/vendors/js/vendor.bundle.base.js"></script>
<script src="assets/vendors/js/vendor.bundle.addons.js"></script>
<script>
    $("#brands_table").html("asd");
    $("#brands_table").jsGrid({
        width: "100%",
        height: "400px",

        filtering: true,
        inserting:true,
        editing:true,
        sorting:true,
        paging:true,
        autoload:true,
        pageSize:10,
        pageButtonCount:5,
        deleteConfirm:"Silmek istediğinize emin misiniz?",

        controller:{
            loadData: function (filter) {
                return $.ajax({
                    type:"GET",
                    url:"assets/php/getbrands.php",
                    data:filter
                });
            },
        },

        fields:[
            {
                name:"id",
                type:"hidden",
                css:'hide'
            },
            {
                name:"name",
                type:"text",
                width:150,
                validate:"required"
            },
            {
                type: "control"
            }
        ]
    });
</script>

Answer 1

假设您的文件都是正确的，我建议将您的 jquery 函数调用包装在 document.ready 中。这样，一旦 DOM 准备好通过 Javascript 进行编辑，它们就只有 运行。

<script>
$(document).ready(function(){
    $("#brands_table").html("asd");
    $("#brands_table").jsGrid({
        width: "100%",
        height: "400px",

        filtering: true,
        inserting:true,
        editing:true,
        sorting:true,
        paging:true,
        autoload:true,
        pageSize:10,
        pageButtonCount:5,
        deleteConfirm:"Silmek istediğinize emin misiniz?",

        controller:{
            loadData: function (filter) {
                return $.ajax({
                    type:"GET",
                    url:"assets/php/getbrands.php",
                    data:filter
                });
            },
        },

        fields:[
            {
                name:"id",
                type:"hidden",
                css:'hide'
            },
            {
                name:"name",
                type:"text",
                width:150,
                validate:"required"
            },
            {
                type: "control"
            }
        ]
    });
    });
</script>

Answer 2

问题是

<script src="assets/vendors/js/vendor.bundle.base.js"></script>

这些脚本的函数名称与 jsGrid 函数名称重叠，因此阻碍了 browser/javascript 正确读取函数我将这些脚本移到了需要它们的地方所以现在没有问题谢谢你的帮助和努力..