利用“data-format-item”自定义selectpage输入框

谷

已于 2024-03-12 18:28:37 修改

阅读量360

点赞数 1

文章标签： javascript html php

于 2024-03-12 18:12:29 首次发布

本文链接：https://blog.csdn.net/wuzhengu/article/details/136658703

版权

FastAdmin动态下拉列表，利用data-format-item，可以自定义列表行，那输入框内容怎么自定义？

先试过追加属性，达到目的，但有些地方不想要追加的属性，却不好去掉。

最后，打开require-form.js及require-backend.min.js，在Form.events.selectpage插入如下代码：

$('.selectpage', form).each(function () {
    var $this = $(this);
    if($this.attr('data-field')) return;
    if(!$this.attr('data-format-item')) return;

    if($this.val()) {
        //“编辑”视图，等初始数据返回，调整一下输入框内容
        var observer = setInterval(() => {
            var selectPage = $this.data('selectPageObject');
            if (!selectPage || !selectPage.data) return;
            afterInput(selectPage.data[0], selectPage);
            clearInterval(observer);
        }, 100);
    }

    $this.data("eSelect", afterInput);

    function afterInput(selectItem, selectPage) {
        if(!selectItem) return;
        if(!selectPage) return;
        var text = selectPage.option.formatItem(selectItem);
        var $other = $this.closest('div.sp_container').find('input.sp_input');
        $other.val(text);
    };
});

调整相应view，不要指定"data-field"，必须填写"data-format-item"，例如：

<input id="c-book_id" data-rule="required" data-source="book/index" data-order-by="id" data-format-item="{id} {name}" data-search-field="id,name" class="form-control selectpage" name="row[book_id]" type="text" value="">