`

就今天!阿里黑科技来了:不排队结账_拿了东西就走人!

阅读更多
原文链接:http://click.aliyun.com/m/23848/
摘要: Bootstrap Table使用和扩展

一.使用
导包:
1.Jquery
2.bootstrap组件(js+css)
3.bootstrap table组件及中文包(js+css+js)
8a8f44c5ef9635e1b418427c6b993da7cdc95184
代码:
例一:                      
<table id="table"></table>
<script>
$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#table').bootstrapTable({
url: '/Home/GetDepartment',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部门名称',
                align: 'center',
                  valign: 'middle',
                width: '100px',
            }, {
                field: 'ParentName',
                title: '上级部门',
            }, {
                field: 'Level',
                title: '部门级别'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            departmentname: $("#txt_search_departmentname").val(),
            statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};
</script>
例二:
<table id="table"></table>
<style>
#table{
table-layout: fixed;
}
</style>
<script type="text/javascript">
var $table = $("#table");
var selections = [];
window.lockEvents = {
        'click .lock':function (e, value, row, index) {
            $.ajax({
                type:"post",
                url:"/copartner/trade/supplier/lock.do",
                async:true,
                dataType:"json",
                data:{
                    id: row.id,
                    isEnable : row.isEnable
                },
                success: function(data) {
                if(data.msg != null) {
                alert(data.msg);
                }
                },
                error:function(jqXHR){
                    alert(jqXHR.status);
                }
            });
            initTable();
        }
    };
function initTable() {
    $table.bootstrapTable('destroy');
    $table.bootstrapTable({
        height: getHeight(),
        toolbar: "#toolbar",
        //search: true,
        //searchAlign: "left",
        //showRefresh: true,
        //showToggle: true,
        showColumns: true,
        //showExport: true,
        //exportDataType: "all",
        //detailView: true,
        //detailFormatter: detailFormatter,
        //minimumCountColumns: 2,
        idField: 'id',
        showFooter: false,
        /*与后台交互*/
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        cache: false,
        striped: true,
        pagination: true,
        //showPaginationSwitch: true,
        pageNumber: 1,
        pageSize: 20,
        pageList: [10, 20, 50, 100],
        url: "/copartner/tradeOrderInfo/list.do",
        //dataField: "rows",
        clickToSelect: true,
        queryParamsType: '',
        queryParams: function queryParams(params) {
            var param = {
            pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                vagueInfo: $(".vagueInput").val(),
            }
            return param;
        },
        sidePagination: "server",//client
        /* onLoadSuccess: function(data){  //加载成功时执行
            alert("加载成功"+data);
        },
        onLoadError: function(){  //加载失败时执行
        alert("加载失败"+data);
        }, */
        /*列*/
        columns: [
            {
            checkbox: true,
            align: 'center',
                valign: 'middle'
            }, {
                title: 'id',
                field: 'id',
                align: 'center',
                valign: 'middle',
                //sortable: true
                width: '100px'
            }, {
                title: '订单编号',
                field: 'alias',
                align: 'center',
                valign: 'middle',
                width: '100px',
                formatter: openFormatter
            }, {
                title: '电话',
                field: 'phone',
                align: 'center',
                valign: 'middle',
                width: '100px',
                formatter: function (value, row, index) {
                return "<a class=\"editPhone\" href=\"\" name=\"phone\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"电话\">" + value + "</a>";
                }
            }, {
                  title: '是否售后',
                  field: 'isAftersales',
                  align: 'center',
                  valign: 'middle',
                width: '100px',
                  formatter: afterSalesFormatter
              }, {
                title: '操作',
                field: 'detail',
                align: 'center',
                valign: 'middle',
                width: '100px',
                formatter: detailFormatter
            }, {
                title: '是否启用',
                field: 'isEnable',
                align: 'center',
                valign: 'middle',
                width: '100px',
events: lockEvents,
                formatter: lockFormatter
            }
        ],
        onClickRow: function (row, $element) {
                curRow = row;
            }
            onLoadSuccess: function (aa, bb, cc) {
            $("#table .rowEditable").editable({
                    url: function (params) {
                        var column = $(this).attr("name");
                        curRow[column] = params.value;
                    },
                    type: 'text'
                });
                $("#table .editPhone").editable({
                    url: function (params) {
                        var sPhone = $(this).attr("name");
                        curRow[sPhone] = params.value;
                        $.ajax({
                            type: 'POST',
                            url: "/copartner/trade/supplier/editPhone.do",
                            data: curRow,
                            dataType: 'JSON',
                            success: function (data, textStatus, jqXHR) {
                            initTable();
                            if(data.msg != null) {
                            alert(data.msg);
                            }
                        },
                        error:function(jqXHR){
                            alert(jqXHR.status);
                        }
                        });
                    },
                    type: 'text'
                });
            }
    });
    $table.bootstrapTable('hideColumn', 'id');
    function afterSalesFormatter(value, row, index) {
    var state = '';
    var color = '#000';
    var color_red = '#c00';
    var color_blue = '#0066ff';
    var color_green = '#5cb85c';
    if(value == 0) {
    state = '否';
    color = color;
    } else if(value == 1) {
    state = "是";
    color = color_green;
    }
            return [
'<span style="color: '+ color +'">' + state + '</span>'
            ].join('');
        }
    function openFormatter(value, row, index) {
            return value;
        }
        function detailFormatter(value, row, index) {
        return [
'<a class="aliasNum" href="orderDetailInfoNew.html?id=' + row.id + '" title="进入明细">',
'<span style="">详情</span>',
'</a>'
            ].join('');
        }
        function lockFormatter(value, row, index) {
    var state = '--';
    var color = '#000';
    var color_red = '#c00';
    var color_blue = '#0066ff';
    if(value == 0) {
    state = '已关闭';
    color = color_red;
    } else if(value == 1) {
    state = "已启用";
    color = color_blue;
    }
            return [
                '<a class="lock" href="javascript:void(0)" title="切换状态">',
                '<span style="color: '+ color +'">' + state + '</span>',
                '</a>'
            ].join('');
        }
        function editReturnCountFormatter(value, row, index) {
    return "<a class=\"rowEditable\" href=\"\" name=\"returnCount\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"投诉数量\">" + value + "</a>";
        }
    function editReturnPriceFormatter(value, row, index) {
    return "<a class=\"rowEditable\" href=\"\" name=\"returnPrice\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"投诉金额\">" + value + "</a>";
        }
    function editReturnReasonFormatter(value, row, index) {
    return "<a class=\"rowEditable\" href=\"\" name=\"returnReason\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"售后原因\">" + value + "</a>";
        }
    // sometimes footer render error
    /*setTimeout(function() {
     $table.bootstrapTable('resetView');
     }, 200);*/
    /*$table.on('check.bs.table uncheck.bs.table ' +
     'check-all.bs.table uncheck-all.bs.table', function () {
     $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
     // save your data, here just save the current page
     selections = getIdSelections();
     // push or splice the selections if you want to save all data selections
     });
     $table.on('expand-row.bs.table', function (e, index, row, $detail) {
     if (index % 2 == 1) {
     $detail.html('Loading from ajax request...');
     $.get('LICENSE', function (res) {
     $detail.html(res.replace(/\n/g, '<br>'));
     });
     }
     });
     $table.on('all.bs.table', function (e, name, args) {
     console.log(name, args);
     });*/
    $(window).resize(function(){
        $table.bootstrapTable('resetView',{
            height: getHeight()
        });
    });
}
function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }
function getData() {
    return $.map($table.bootstrapTable('getData'), function (row) {
            return row.id+"---"+row.returnCount+"---"+row.returnPrice+"---"+row.returnReason+"---"+row.saleCount;
        });
    }
function getHeight() {
        return document.body.clientHeight*0.88;
    }
    /*function detailFormatter(index, row) {
     var html = [];
     $.each(row, function (key, value) {
     html.push('<p><b>' + key + ':</b> ' + value + '</p>');
     });
     return html.join('');
     }*/
    $(document).ready(function() {
        initTable();
    });
</script>

二.扩展
        行内编辑 Table Editable
        表格导出 Table Export
原文链接:http://click.aliyun.com/m/23848/

分享到:
评论

相关推荐

    pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.zip

    pandas whl安装包,对应各个python版本和系统(具体看资源名字),找准自己对应的下载即可! 下载后解压出来是已.whl为后缀的安装包,进入终端,直接pip install pandas-xxx.whl即可,非常方便。 再也不用担心pip联网下载网络超时,各种安装不成功的问题。

    基于java的大学生兼职信息系统答辩PPT.pptx

    基于java的大学生兼职信息系统答辩PPT.pptx

    基于java的乐校园二手书交易管理系统答辩PPT.pptx

    基于java的乐校园二手书交易管理系统答辩PPT.pptx

    tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

    tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

    Android Studio Ladybug(android-studio-2024.2.1.10-mac.zip.002)

    Android Studio Ladybug 2024.2.1(android-studio-2024.2.1.10-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/89954174 part2: https://download.csdn.net/download/weixin_43800734/89954175

    基于ssm框架+mysql+jsp实现的监考安排与查询系统

    有学生和教师两种角色 登录和注册模块 考场信息模块 考试信息模块 点我收藏 功能 监考安排模块 考场类型模块 系统公告模块 个人中心模块: 1、修改个人信息,可以上传图片 2、我的收藏列表 账号管理模块 服务模块 eclipse或者idea 均可以运行 jdk1.8 apache-maven-3.6 mysql5.7及以上 tomcat 8.0及以上版本

    tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

    tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

    Android Studio Ladybug(android-studio-2024.2.1.10-mac.zip.001)

    Android Studio Ladybug 2024.2.1(android-studio-2024.2.1.10-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/89954174 part2: https://download.csdn.net/download/weixin_43800734/89954175

    基于MATLAB车牌识别代码实现代码【含界面GUI】.zip

    matlab

    基于java的毕业生就业信息管理系统答辩PPT.pptx

    基于java的毕业生就业信息管理系统答辩PPT.pptx

    基于Web的毕业设计选题系统的设计与实现(springboot+vue+mysql+说明文档).zip

    随着高等教育的普及和毕业设计的日益重要,为了方便教师、学生和管理员进行毕业设计的选题和管理,我们开发了这款基于Web的毕业设计选题系统。 该系统主要包括教师管理、院系管理、学生管理等多个模块。在教师管理模块中,管理员可以新增、删除教师信息,并查看教师的详细资料,方便进行教师资源的分配和管理。院系管理模块则允许管理员对各个院系的信息进行管理和维护,确保信息的准确性和完整性。 学生管理模块是系统的核心之一,它提供了学生选题、任务书管理、开题报告管理、开题成绩管理等功能。学生可以在此模块中进行毕业设计的选题,并上传任务书和开题报告,管理员和教师则可以对学生的报告进行审阅和评分。 此外,系统还具备课题分类管理和课题信息管理功能,方便对毕业设计课题进行分类和归档,提高管理效率。在线留言功能则为学生、教师和管理员提供了一个交流互动的平台,可以就毕业设计相关问题进行讨论和解答。 整个系统设计简洁明了,操作便捷,大大提高了毕业设计的选题和管理效率,为高等教育的发展做出了积极贡献。

    机器学习(预测模型):2000年至2015年期间193个国家的预期寿命和相关健康因素的数据

    这个数据集来自世界卫生组织(WHO),包含了2000年至2015年期间193个国家的预期寿命和相关健康因素的数据。它提供了一个全面的视角,用于分析影响全球人口预期寿命的多种因素。数据集涵盖了从婴儿死亡率、GDP、BMI到免疫接种覆盖率等多个维度,为研究者提供了丰富的信息来探索和预测预期寿命。 该数据集的特点在于其跨国家的比较性,使得研究者能够识别出不同国家之间预期寿命的差异,并分析这些差异背后的原因。数据集包含22个特征列和2938行数据,涉及的变量被分为几个大类:免疫相关因素、死亡因素、经济因素和社会因素。这些数据不仅有助于了解全球健康趋势,还可以辅助制定公共卫生政策和社会福利计划。 数据集的处理包括对缺失值的处理、数据类型转换以及去重等步骤,以确保数据的准确性和可靠性。研究者可以使用这个数据集来探索如教育、健康习惯、生活方式等因素如何影响人们的寿命,以及不同国家的经济发展水平如何与预期寿命相关联。此外,数据集还可以用于预测模型的构建,通过回归分析等统计方法来预测预期寿命。 总的来说,这个数据集是研究全球健康和预期寿命变化的宝贵资源,它不仅提供了历史数据,还为未来的研究和政策制

    基于微信小程序的高校毕业论文管理系统小程序答辩PPT.pptx

    基于微信小程序的高校毕业论文管理系统小程序答辩PPT.pptx

    基于java的超市 Pos 收银管理系统答辩PPT.pptx

    基于java的超市 Pos 收银管理系统答辩PPT.pptx

    基于java的网上报名系统答辩PPT.pptx

    基于java的网上报名系统答辩PPT.pptx

    基于java的网上书城答辩PPT.pptx

    基于java的网上书城答辩PPT.pptx

    婚恋网站 SSM毕业设计 附带论文.zip

    婚恋网站 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

    基于java的戒烟网站答辩PPT.pptx

    基于java的戒烟网站答辩PPT.pptx

    基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx

    基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx

    机器学习(预测模型):自行车共享使用情况的数据集

    Capital Bikeshare 数据集是一个包含从2020年5月到2024年8月的自行车共享使用情况的数据集。这个数据集记录了华盛顿特区Capital Bikeshare项目中自行车的租赁模式,包括了骑行的持续时间、开始和结束日期时间、起始和结束站点、使用的自行车编号、用户类型(注册会员或临时用户)等信息。这些数据可以帮助分析和预测自行车共享系统的需求模式,以及了解用户行为和偏好。 数据集的特点包括: 时间范围:覆盖了四年多的时间,提供了长期的数据观察。 细节丰富:包含了每次骑行的详细信息,如日期、时间、天气条件、季节等,有助于深入分析。 用户分类:数据中区分了注册用户和临时用户,可以分析不同用户群体的使用习惯。 天气和季节因素:包含了天气情况和季节信息,可以研究这些因素对骑行需求的影响。 通过分析这个数据集,可以得出关于自行车共享使用模式的多种见解,比如一天中不同时间段的使用高峰、不同天气条件下的使用差异、季节性变化对骑行需求的影响等。这些信息对于城市规划者、交通管理者以及自行车共享服务提供商来说都是非常宝贵的,可以帮助他们优化服务、提高效率和满足用户需求。同时,这个数据集也

Global site tag (gtag.js) - Google Analytics