日常总结之小狐狸项目1——chosen使用, bootstrapTable, 及其他好用的包，插件

2018.01.24
做了自己小狐狸入职以来第一个小项目——房销宝管理后台，
后端：springBoot
前端：主要是一个 bootstrapTable 列表展示，然后是一个 select 列表展示，使用了jquery的 chosen 插件

一、 jquery 的 chosen 插件，及其使用方法：
1、html 文件引入插件自带 css，js 文件

<link rel="Stylesheet" type="text/css" href="/css/chosen.css" />
<script type="text/javascript" src="/js/chosen.jquery.min.js"></script>

2、页面 select 正常写

<select id="rl_cityName" style="width: 120px;">
    <option value="-1">--选择城市--</option>
</select>

3、在 js 文件中绑定chosen事件

$("#rl_cityName").chosen({ width:"120px" })；

！！！这里一开始遇到一个问题：如果直接引用

$("#rl_cityName").chosen()；

会出现 select，以及下拉框宽度为0px（即 width:0px;）的情况，查看样式，是 element.style 自动将 width 设置为 0px，
解决方法有两个：
(1). 直接修改 chosen.css 文件

.chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; -webkit-user-select: none; -moz-user-select: none; user-select: none; width:120px !important; }

在 chosen-container 类的样式表中添加 width 属性，同时使用 !important 提高优先级
从原理来说，这种方法是应该奏效的，虽然会改变所有页面中使用 chose 的 width 属性，但是在我的项目中没有作用

(2). 在对应的 js 文件中设置下拉框的 width，如一开始所示

4、为 select 配置 option 选项及监听事件
配置option选项： trigger 函数 chosen:update 事件

$.ajax({
    url: "/relevantConsultant/cityNameList",
    success: function (data) {
    var html = '<option value="-1" selected="selected">--选择城市--</option>';;
    for (var key in data.data) {
        html += '<option value="' + key + '">' + key + '</option>'
    }
    $("#rl_cityName").html(html).trigger("chosen:updated");
}});

获取已选元素的值： val() 函数

$("#rl_cityName").val()；

绑定 change 监听事件

$("#rl_cityName").chosen({ width:"120px" }).change(events.update_house);

events.update_house 为监听函数

二、bootstrapTable
页面引入相应包之后，声明 table

<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<table id="rl_table"></table>

js文件配置列表数据项和数据源

$('#rl_table').bootstrapTable({
    url: "/relevantConsultant/petitionList",//数据源
    dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
    undefinedText: '',
    pagination: true,//是否分页
    pageSize: 15,//单页记录数
    pageList: [5, 10, 20, 50],//分页步进值
    sidePagination: "server",//服务端分页
    contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
    dataType: "json",//期待返回数据类型
    method: "get",//请求方式
    searchAlign: "left",//查询框对齐方式
    searchOnEnterKey: false,//回车搜索
    buttonsAlign: "left",//按钮对齐方式
    toolbar: "#toolbar",//指定工具栏
    toolbarAlign: "right",//工具栏对齐方式
    queryParams: queryParams_rl,
    onLoadSuccess:function(){
    },
    columns: [
    {
        title: "城市",
        field: "cityName",
    }，
    {
        title: "楼盘名称",
        field: "groupName",
    },
    {
        title: "楼盘id",
        field: "groupId",
    },
    {
        title: "请愿数",
        field: "sum",
     },
    {
        title: "最近请愿时间",
        field: "lastModifyTime",
    }]
});

数据更新

$("#rl_table").bootstrapTable('refreshOptions',condition_rl);   //condition_rl 为查询键值对

三、各式各样的好用的开发包及插件
①、自动联想搜索
避坑！！！
原先代码为后端同学所写，使用了 bigAutoComplete 插件，此插件非常坑！！！
给使用的童鞋提个醒：
1). 他的参数准备在页面刚进入时便已 copy 准备好（注意是copy），之后再修改原变量，都不会改变向后台的传参，这个问题找了好久。。。
2). 此插件只有四个参数：url, params, type, callback
换句话说，无法在调用接口之后对后台返回的数据进行修改准备，嗯，所以这个插件应用场景灰常有限！

后来改用了 jquery 自带插件 autoComplete 之后，一片阳光呀(附示例)

$("#rl_houseName").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : "/relevantConsultant/groupNameSuggest",
            type : "get",
            dataType : "json",
            data ：{"keyword":$("#rl_houseName").val(), "cityId":window.cityId},
            success: function( data ) {
                response( $.map( data.data, function( item ) {
                    return {
                        label: item.groupName  //下拉框中希望展示的内容
                    }
                }));
            }
        });
    }
});

②、提示弹框

<script type="text/javascript" src="/js/showDialog.js"></script>
<link rel="Stylesheet" type="text/css" href="/css/showDialog.css" />

③、日期时间选择

<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>

哈哈哈，第一期总结暂时更新到这儿啦，有些小问题后续再补充，希望自己在进步的同时，也能帮到需要的人~
每天积累一点点，一起加油呀ヾ(◍°∇°◍)ﾉﾞ