第一种内置版

//在普通搜索渲染后
table.on('post-common-search.bs.table', function (event, table) {
   $("input[name='DepName']").addClass("selectpage").data("source", "department/index").data('params','{"custom[isCollege]":"1"}').data('field','DepName').data('primary-key','DepName');
   $("input[name='grade']").addClass("selectpage").data("source", "grade/index").data('field','grade').data('primary-key','grade');
   $("input[name='major']").addClass("selectpage").data("source", "major/index").data('field','major').data('primary-key','major');
   Form.events.cxselect($("form", table.$commonsearch));
   Form.events.selectpage($("form", table.$commonsearch));
}); 

第二种自定义版

 在功能模块的index.html页面添加以下代码

<style>
    .action{
        float: left;
        line-height: 33px;
        margin-right: 10px;
    }
    .form-group{
        display: inline-block;
        float: left;
    }
</style>
<script id="custom" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
            <div class="row">
                <div class="form-group" style="">
                    <input class="operate gradeID" type="hidden" data-name="gradeID" value="="/>
                    <div class="action">
                        <input class="form-control selectpage" type="text" name="gradeID" placeholder="请输入选择年级" value="" data-source="base/grade/index" data-field="grade" data-primary-key="gradeID"/>
                    </div>
                </div>
                <div class="form-group" style="">
                    <input class="operate collegeID" type="hidden" data-name="collegeID" value="="/>
                    <input class="operate majorID" type="hidden" data-name="majorID" value="="/>
                    <input class="operate classID" type="hidden" data-name="classID" value="="/>
                    <div class="action">
                            <div class="form-inline" data-toggle="cxselect" data-selects="collegeID,majorID,classID">
                                学院
                                <select class="collegeID form-control" name="collegeID" data-url="theme.log/classMajorCollege"></select>
                                专业
                                <select class="majorID form-control" name="majorID" data-url="theme.log/classMajorCollege"></select>
                                班级
                                <select class="classID form-control" name="classID" data-url="theme.log/classMajorCollege"></select>
                            </div>
                    </div>
                </div>

                    <div class="form-group">
                        <input type="hidden" class="operate" data-name="updatetime" value="RANGE"/>
                        <div class="action">
                            <input type="text" class="form-control datetimerange" name="updatetime" value=""  placeholder="提交时间"/>
                        </div>
                    </div>

                <div class="form-group" style="">
                    <input class="operate text" type="hidden" data-name="studentID|studentName" value="LIKE"/>
                    <div class="action">
                        <input class="form-control" type="text" name="name" placeholder="请输入姓名" value="" />
                    </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-3">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="submit" class="btn btn-success btn-block submit" value="提交"/>
                            </div>
                            <div class="col-xs-6">
                                <input type="reset" class="btn btn-primary btn-block reset" value="重置"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

在功能模块对应的js文件的初始化表格里面添加

searchFormTemplate: 'custom',

            // 监听下拉列表改变的事件
            $(document).on('change', 'input[name=\'gradeID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'select[name=\'collegeID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'select[name=\'majorID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'select[name=\'classID\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'input[name=\'theme_id\']', function () {
                $('.submit').trigger("click");
            });
            $(document).on('change', 'input[name=\'updatetime\']', function () {
                $('.submit').trigger("click");
            });

 三级联动的方法

    /**
     * 读取联动
     */
    public function classMajorCollege()
    {
        $params = $this->request->get("");
        if ($params) {
            $collegeID = isset($params['collegeID']) ? $params['collegeID'] : null;
            $majorID = isset($params['majorID']) ? $params['majorID'] : null;
        } else {
            $collegeID = $this->request->get('collegeID');
            $majorID = $this->request->get('majorID');
        }
        $where = array();
        if ($collegeID)
        {
            $where['id'] = $collegeID;
            $value = 'id';
            $name = 'name';
            $table = 'major';
        }elseif ($collegeID === null)
        {
            $where['isCollege'] = 1;
            $value = 'id';
            $name = 'name';
            $table = 'college';
        }
        if ($majorID !== null)
        {
            $where['id'] = $majorID;
            $value = 'id';
            $name = 'name';
            $table = 'classs';
        }
        $provincelist = array();
        if (isset($table)) $provincelist = Db::name($table)->where($where)->field($value.' as value,'.$name.' as name')->select();
        $this->success('', '', $provincelist);
    }

心血来潮不想用原本的搜索方式,想更方便一点,特此记录一下。

Logo

电影级数字人,免显卡端渲染SDK,十行代码即可调用,工业级demo免费开源下载!

更多推荐