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

  • 相关阅读:
    学习Vue CLI 3.x版本的安装以及创建项目
    Java中同一线程中的对象hashcode一样
    Java中线程范围内共享问题
    Java中的线程池模拟
    java中的Switch
    string、stringbuffer、stringbuild的时间性能对比
    Java中lock上锁 unlock解锁
    java中的三目运算
    Java中的Instanceof
    一个简单的for循环
  • 原文地址:https://www.cnblogs.com/Kyaya/p/9004288.html
Copyright © 2011-2022 走看看