请教selectPage的问题

wooddoor 1月前 221

kaoshi\add.html
<div class="col-xs-12 col-sm-8">
<input id="c-nianji_id" data-rule="required" [colorr]data-source="nianji/index" class="form-control selectpage"[/colorr] name="row[nianji_id]" type="text" value="">
</div>
public\assets\js\backend\kaoshi.js
add: function () {
Controller.api.bindevent();

       //这段代码不起作用啊:
            $('#c-nianji_id').selectPage({
                showField : 'mingcheng',
                selectOnly : true,
            });
        },
        edit: function () {
            Controller.api.bindevent();
        },

如果改为这样:
kaoshi\add.html
<div class="col-xs-12 col-sm-8">
<input id="c-nianji_id" data-rule="required" [colorr]class="form-control"[/colorr] name="row[nianji_id]" type="text" value="">
</div>
public\assets\js\backend\kaoshi.js
add: function () {
Controller.api.bindevent();
[colorr]//这样的话,点击下拉列表选择时,却提示“连接到服务器时发生错误”,
//查看POST,却是返回正常的JSON数据,完全没错误的,但下拉列表就是莫名其妙的说错误了:[/colorr]
require(['selectpage'], function () {
$('#c-nianji_id').selectPage({
data : 'nianji/index',
showField : 'mingcheng',
selectOnly : true,
});
});
},
edit: function () {
Controller.api.bindevent();
},
https://cdn.forum.fastadmin.net/uploads/201803/16/2e55c08e4288897b4a8a513e6334b491

最后于 1月前 被wooddoor编辑
最佳回复
  • liuhaitao 1月前

    @wooddoor
    我是这样:先ajax取出数据,再使用selectpage。

    $.get('category/getChildCates', {pid:0}, function(data){
                        $('#hangye').selectPage({
                            showField : 'name',
                            keyField : 'id',
                            data:data.list,
                            eSelect:function(data){
                                //
                            },
                        });
最新回复 (13)
  • Stranger 1月前
    0 引用 2

    @wooddoor
    nianji这个控制器里面

        public function selectpage()
        {
            return parent::selectpage();
        }

    data-source="nianji/index"改成

    data-source="nianji/selectpage"
  • wooddoor 楼主 1月前
    0 引用 3

    @Stranger html中设置data-source="nianji/index"是正常的啊

  • liuhaitao 1月前
    0 引用 4

    @wooddoor
    我也觉得selectpage有问题,在html里对selectpage元素添加标签不起作用,请官方验证下。
    在js文件里正常使用也有问题。

  • Stranger 1月前
    0 引用 5

    @wooddoor
    你按照我那个去试试

  • wooddoor 楼主 1月前
    0 引用 6

    @Stranger 没有解决任何问题。
    在html中设置data-source="nianji/index"时的问题是不能在js中控制selectPage,比如我是[colorr]在html中设置data-select-only=”true”是正常的只读模式[/colorr],但如果不是在html中设置data-select-only=”true”而是[colorr]在js中设置selectOnly : true,则完全无效[/colorr]【js中没有require(['selectpage']】
    要使得js中控制selectPage的代码有效,则必须require(['selectpage'],此时html中就不能设置class="selectpage"了(否则会出现两个selectpage),但是此时selectpage的data设置为原来正常使用的"nianji/index"或你说的"nianji/selectpage",都是出现点击selectpage的下拉按钮时提示“连接服务器时发生错误!”【但根据POST情况,实际上已经返回了正确的JSON数据了】

  • liuhaitao 最佳回复 1月前
    0 引用 7

    @wooddoor
    我是这样:先ajax取出数据,再使用selectpage。

    $.get('category/getChildCates', {pid:0}, function(data){
                        $('#hangye').selectPage({
                            showField : 'name',
                            keyField : 'id',
                            data:data.list,
                            eSelect:function(data){
                                //
                            },
                        });
  • wooddoor 楼主 1月前
    0 引用 8

    @liuhaitao 还是一样的错误:“连接服务器时发生错误!”【不好意思,刚才没把旧代码删掉,所以还是一样的错误。但是把旧代码删除了后,连selectPage都不出来了】
    在点击下拉列表是控制台出现错误:
    https://cdn.forum.fastadmin.net/uploads/201803/19/285b1250da6730edd000e4422162fb6a
    很奇怪,难道是我的服务器问题吗?但是如果不用js控制selectPage,而是在html中设置class="selectpage"却又很正常的啊……

    最后于 1月前 被wooddoor编辑
  • lianeng 1月前
    0 引用 9

    问题解决了吗? 我也遇到这个问题,html中设置data-source="nianji/selectpage" 是没问题,主要是想在JS里让selectPage选择后回调函数,遇到问题;

  • wooddoor 楼主 1月前
    0 引用 10

    @liuhaitao 再仔细检查了一下,按你的方法弄成功了,谢谢。

  • lianeng 1月前
    0 引用 11

    @wooddoor
    怎么弄成功的,能否分享一下,谢谢

  • wooddoor 楼主 1月前
    0 引用 12

    @lianeng 是的,html中设置各项都没问题,但使用js设置就出问题了。按照“liuhaitao”给出的方法,先ajax取数据后再设置、使用selectPage,都正常了【html中不要设置clss="selcetPage",只在js中控制使用】。

            //2.加载selectpage模块,并进行初始化
                require(['selectpage'], function () {
                    //莫名其妙的错误,data设置一个链接,能正确获取到JSON数据,但selectPage愣是说服务器错误
                    /*$('#c-nianji_id').selectPage({
                        data : 'nianji/index',
                        keyField: 'id',
                        showField : 'mingcheng',
                        selectOnly : true
                    });*/
                    $.get('nianji/index', {
                        pid: 0
                    }, function (data) {
                        $('#c-nianji_id').selectPage({
                            showField: 'mingcheng',
                            data: data.rows,
                            keyField: 'id',
                            selectOnly: true,
                            eSelect: function (data) {
                                $('#c-kaoshiriqi').val("2018-09-01");
                            },
                        });
                    });
                });
  • wooddoor 楼主 1月前
    0 引用 13

    [colorr]在反复翻阅selectPage的官方文档、DEMO后,终于找到问题出在哪了:selectPage在设置data为URL时,必须搭配eAjaxSuccess处理AJAX返回的数据,否则就会出现“服务器错误”,同时,AJAX返回的数据必须存在list和totalRow两个节点,结合上面“liuhaitao”的解决办法,可以有两种方式设置selectPage,代码如下[/colorr]【[colorb]都是不在html中设置clss="selcetPage",只在js中控制使用[/colorb]】:
    [colorp]public\assets\js\backend\kaoshi.js[/colorp]

        add: function () {
                Controller.api.bindevent();
                
                //2.加载selectpage模块,并进行初始化
                require(['selectpage'], function () {
                    //终于成功了,直接js控制生成selectPage时,data设置为一个URL由selectPage进行ajax取数据
                    //此时必须使用eAjaxSuccess处理AJAX取得的数据,否则就会提示“服务器错误”了
                    //另外,AJAX返回的JSON中必须存在list和totalRow两个节点
                    $('#c-nianji_id').selectPage({
                        keyField: 'id',
                        showField : 'mingcheng',
                        selectOnly : true,
                        //AJAX取数据,必须配合下面的eAjaxSuccess使用
                        //还可以搭配params传递AJAX查询的参数,详情见:
                        //https://terryz.github.io/selectpage/docs.html【eAjaxSuccess】
                        //https://terryz.github.io/selectpage/demo.html【8.Ajax请求服务端数据模式】
                        data: 'nianji/index2',
                        eAjaxSuccess: function (d) {
                            var result;
                            if (d) result = d;
                            else result = undefined;
                            return result;
                        },
                        eSelect: function (data) {
                            $('#c-mingcheng').val(data.id);
                            $('#c-kaoshiriqi').val("2018-09-01");
                        },
                    });
                    //成功,必须先ajax取到数据再供给selectPage使用
                    /*$.get('nianji/index', {
                        pid: 0
                    }, function (data) {
                        $('#c-nianji_id').selectPage({
                            showField: 'mingcheng',
                            data: data.rows,
                            keyField: 'id',
                            selectOnly: true,
                            eSelect: function (data) {
                                $('#c-kaoshiriqi').val("2018-09-01");
                            },
                        });
                    });*/
                });
            },
         /**
         * 用于selectpage的data-source
         */
        public function index2()
        {
            //当前是否为关联查询
            $this->relationSearch = false;
            //设置过滤方法
            $this->request->filter(['strip_tags']);
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
                $total = $this->model
                        
                        ->where($where)
                        ->order($sort, $order)
                        ->count();
                $list = $this->model
                        
                        ->where($where)
                        ->order($sort, $order)
                        ->limit($offset, $limit)
                        ->select();
                foreach ($list as $row) {
                    $row->visible(['id','mingcheng','createtime','updatetime']);
                    
                }
                $list = collection($list)->toArray();
                //return json($list);
                $result = array("totalRow" => $total, "list" => $list);
                return json($result);
        }
    最后于 1月前 被wooddoor编辑
  • 未登录
    15
返回
发表回复