zoukankan      html  css  js  c++  java
  • bootstrap-table 行内编辑

    1.文件引入

     <link rel="stylesheet" href="bootstrap.css">
     <link rel="stylesheet" href="bootstrap-table.css">
     <link rel="stylesheet" href="bootstrap3-editable/css/bootstrap-editable.css">
     <script src="jquery2.1.4.js"></script>
     <script src="bootstrap.js"></script>
     <script src="bootstrap-table.js"></script>
     <script src="bootstrap-table-editable.js"></script>
     <script src="bootstrap3-editable/js/bootstrap-editable.js"></script>
     <script src="bootstrap-table-zh-CN.js"></script>

    2.内容代码

    <table id="table"></table>
    <script>
        $("#table").bootstrapTable({
            toolbar: "#toolbar",
            striped: true, //是否显示行间隔色
            height:300,
            sortable: false,//是否排序
            search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
            strictSearch: true, //是否显示刷新
            showColumns: true, //是否显示所有的列
            showRefresh: true, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            showToggle:true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            columns: [{
                field: 'id',
                title: 'Item ID',
                editable: true  //可编辑列
            }, {
                field: 'name',
                title: 'Item Name',
                editable: true   //可编辑列
            }, {
                field: 'price',
                title: 'Item Price',
                editable: true //编辑列
            }],
    //        data可以换成url
            data: [{
                id: 1,
                name: 'Item 1',
                price: '$1'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }, {
                id: 3,
                name: 'Item 3',
                price: '$3'
            }, {
                id: 4,
                name: 'Item 4',
                price: '$4'
            }, {
                id: 5,
                name: 'Item 5',
                price: '$5'
            }, {
                id: 6,
                name: 'Item 6',
                price: '$6'
            }, {
                id: 7,
                name: 'Item 7',
                price: '$7'
            }, {
                id: 8,
                name: 'Item 8',
                price: '$8'
            }, {
                id: 9,
                name: 'Item 9',
                price: '$9'
            }, {
                id: 10,
                name: 'Item 10',
                price: '$10'
            }]
        })
    </script>

    效果展示

    3.下载地址

      bootstrap3-editable:https://github.com/vitalets/x-editable

  • 相关阅读:
    hdu2604 矩阵快速幂
    自己对有上下界的网络流的理解
    自己对有上下界的网络流的理解
    POJ 2396 构造矩阵(上下流)
    POJ 2396 构造矩阵(上下流)
    hdu4940 有上下界的无源可行流判断
    hdu4940 有上下界的无源可行流判断
    hdu4515 小模拟
    hdu4515 小模拟
    hdu4901 枚举状态(找集合对S(xor) ==T(and))
  • 原文地址:https://www.cnblogs.com/Kyaya/p/9004288.html
Copyright © 2011-2022 走看看