zoukankan      html  css  js  c++  java
  • Bootstrap-table custome-ajax用法

    <div id="toolbar">
                <div class="form-inline" role="form">
                    <div class="form-group">
                        <select class="form-control">
                            <option value="InterfNo" selected>经销商编号</option>
                            <option value="JoyoId">卓越卡号</option>
                            <option value="NickName">微信昵称</option>
                            <option value="Email">邮箱</option>
                            <option value="UserId">用户编号</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input name="search" class="form-control" type="text" placeholder="请输入查询关键字">
                    </div>
                    <div class="form-group" style="margin-left:20px;">
                        绑定日期:
                        <div class="input-group input-daterange">
                            <input type="text" id="sDate" name="sDate" readonly class="form-control" placeholder="开始日期">
                            <span class="input-group-addon"></span>
                            <input type="text" id="eDate" name="eDate" readonly class="form-control" placeholder="结束日期">
                        </div>
                    </div>
                    <button id="ok" type="button" class="btn btn-default">搜索</button>
                </div>
            </div>
    
            <table id="table" data-toolbar="#toolbar" data-detail-view="true" data-page-list="[10, 20, 50, 100]" data-detail-formatter="detailFormatter">
                <thead>
                    <tr>
                        <th data-field="UserId" data-width="150">用户编号</th>
                        <th data-field="NickName" data-width="220">昵称</th>
                        <th data-field="InterfNo" data-width="150">经销商编号</th>
                        <th data-field="JoyoId" data-width="60">卓越卡号</th>
                        <th data-field="Email" data-width="180">邮箱</th>
                        <th data-field="CreationTime" data-width="160">绑定时间</th>
                        <th data-formatter="operateFormatter" data-events="operateEvents">操作</th>
                    </tr>
                </thead>
            </table>

    var $table = $('#table');
    var btnSearch = $('#ok');


    btnSearch.click(function () { $table.bootstrapTable('selectPage', 1); }); $table.bootstrapTable({ method: 'get', url: url, striped: true, dataType: "json", idField: "UserId", pagination: true, queryParamsType: "limit", singleSelect: false, contentType: "application/json;charset=utf-8", pageSize: 10, pageNumber: 1, search: false, //不显示 搜索框 showColumns: false, //不显示下拉框(选择显示的列) sidePagination: "server", //服务端请求 queryParams: queryParams, responseHandler: responseHandler, formatLoadingMessage: function () { return "请稍等,正在加载中..."; }, onLoadError: function (data) { $table.bootstrapTable('removeAll'); } });
            //自定义传递到服务器的参数
            function queryParams(params) {
                $('#toolbar').find('input[name]').each(function () {
                    params[$(this).attr('name')] = $(this).val();
                });
                params["pageSize"] = params.limit;
                var pageindex = params.offset / params.limit + 1;
                //if (btnSearch.data("search") == "1") {
                //    pageindex = 1;
                //    btnSearch.data("search", 0);
                //    params.pageNumber = 0;
                //}
                params["pageIndex"] = pageindex;
                params["Key"] = $("#toolbar select option:selected").val();
                params["value"] = params.search;
    
                return params;
            }
          //操作列按钮执行的方法  
          window.operateEvents = {
                'click .wxUnBind': function (e, value, row) {
                    var d = { UserId: row.UserId, UnionId: row.UnionId };
                    var url = '@Url.Action("WxUnBind")';
                    unBind(url, d, $(e.target).text());
                },
                'click .interfNoUnBind': function (e, value, row) {
                    if (row.InterfNo.length == 0) {
                        swal("该用户未绑定经销商编号,无需解绑!", "", "error");
                    } else {
                        var d = { UserId: row.UserId, interfNo: row.InterfNo };
                        var url = '@Url.Action("InterfNoUnBind")';
                        unBind(url, d, $(e.target).text());
                    }
                }
            };
            
            //格式化操作列中需要设置的按钮
            function operateFormatter(value, row, index) {
                var html = [];
                html.push('<div>');
                html.push('<a class="wxUnBind" href="javascript:void(0)" title="微信解绑">');
                html.push('微信解绑');
                html.push('</a>');
    
                if (row.InterfNo.length > 0)
                    html.push('<a style="margin-left:10px" class="interfNoUnBind" href="javascript:void(0)" title="经销商解关联">经销商解关联</a>');
    
                html.push('</div>');
    
                return html.join('');
            }
  • 相关阅读:
    Mvc form提交
    FlexiGrid 使用 全选、自动绑定
    Mysql Insert Or Update语法例子
    orderby与groupby同时使用
    SQLSTATE[HY000] [2002] No such file or directory in
    swoole安装
    关于商城分类查询表结构与数据查询
    查询数据库每张表的信息
    php 正则验证
    PHP代码优化
  • 原文地址:https://www.cnblogs.com/lvcao2099/p/5160593.html
Copyright © 2011-2022 走看看