Question

真的没有问题，但我不明白我在这里做错了什么？

<head>
    <link rel="stylesheet" type="text/css" href="gridstack.js/dist/gridstack.css">
</head>

<body>
    <div class="grid-stack">
        <div class="grid-stack-item" 
            data-gs-x="0" data-gs-y="0" 
            data-gs-width="4" data-gs-height="2">
                <div class="grid-stack-item-content"> azazfaz</div>
        </div>
        <div class="grid-stack-item" 
            data-gs-x="4" data-gs-y="0" 
            data-gs-width="4" data-gs-height="4">
                <div class="grid-stack-item-content"></div>
        </div>
    </div>
</body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>

<script type="text/javascript">
    $(function () {
        var options = {
            cell_height: 80,
            vertical_margin: 10
        };
        $('.grid-stack').gridstack(options);
    });
</script>

我收到此错误：

gridstack.js:391 Uncaught TypeError: undefined is not a function

指向gridstack中的这一行：

  var is_nested = this.container.closest('.' + opts.item_class).size() > 0;

编辑：我找到了问题，如果我替换这行

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

通过

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

然后它有效，任何想法为什么？

Answer 1

作为一种变通方法，当size()函数不存在时，您可以执行以下操作使gridstack工作：

$.fn.size = function(){
  return this.length;
};

Answer 2

jQuery 3.0删除了jQuery.fn.size方法。使用这个库时，坚持使用1.11.x可能更安全。

https://github.com/jquery/jquery/issues/1749

（顺便说一下，我实际上得到了this.container.closest（...）。size不是报告错误的函数。）

Answer 3

如果按照https://api.jquery.com/size/

的建议对gridstack.js进行编辑，则可以使用jQuery 3.0及更高版本

更改gridstack.js（版本0.2.5）中的第511行：

observedArrayList

到

class ToolView : View() {
    override val root = VBox()


    companion object handler {

        //val account1 = Account("Google", "martvdham@gmail.com", "kkk")
        //val account2 = Account("Google", "martvdham@gmail.com", "Password")
        var accounts = FXCollections.observableArrayList<Account>(

        )
        var gson = GsonBuilder().setPrettyPrinting().create()
        val ggson = Gson()

        fun writeData(){
            FileWriter("accounts.json").use {
                ggson.toJson(accounts, it)
            }
        }

        fun readData(){
            accounts.clear()
            FileReader("accounts.json").use{
                var account = gson.fromJson(it, Array<Account>::class.java)
                if(account == null){return}
                for(i in account){
                    accounts.add(i)
                }
            }

        }
    }


    init {
        readData()
        borderpane {
            center {
                tableview<Account>{
                    items = accounts

                    column("Name", Account::name)
                    column("Login", Account::login)
                    column("Password", Account::password)

                    contextMenu = ContextMenu().apply{
                        menuitem("Delete"){
                            selectedItem?.apply{// HERE IS WHERE THE ITEM DELETE CODE SHOULD BE}
                        }
                    }
                }
            }
            bottom{
                button("Add account").setOnAction{
                    replaceWith(AddView::class, ViewTransition.SlideIn)
                }
            }
        }
    }
}

和gridstack工作正常。

gridstack基础知识，如何使演示工作

3 个答案: