可编辑table

提问 未结
9 236
小嘿嘿交朋友
悬赏:20飞吻
版本:layui 浏览器:谷歌
想做个可编辑的表格,先写了个静态html 可以实现,但是换成jsp就不触发编辑选项 求解答
html

jsp
回帖
  • 没看出问题,可能是其他地方的问题吧,
    0 回复
  • @自在唯我 我也很蒙蔽,html 好使,直接粘到jsp就是不行
    0 回复
  • 我就在jsp里使用的,没问题
    0 回复
  • jsp里会不会路径变化导致没引入js和css,比如使用了<base href="<%=basePath%>">
    0 回复
  • @自在唯我 表格都能渲染出来 js肯定加载上了 不然表格都出不来啊
    0 回复
  • 代码复制出来呢
    0 回复
  • <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>订单信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/layui/css/global.css" media="all">
    <style type="text/css">
    .layui-form-label{width: 100px;}
    .layui-elem-field legend{margin: 10px auto;font-weight: bolder;}
    .layui-input-block{text-align: center; margin: 0}
    ::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
    }
    ::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
    }
    ::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
    }
    ::-webkit-scrollbar-corner {
    background: transparent;
    }
    </style>
    </head>
    <body>

    <div class="layui-fluid" style="padding:0">
    <div class="layui-row layui-col-space15" style="margin:0">

    <div class="layui-col-md12">
    <div class="layui-card">
    <div class="layui-card-body">
    <form class="layui-form" action="">

    <fieldset class="layui-elem-field layui-field-title">
    <legend>车辆信息</legend>
    <table class="layui-hide" id="carList"></table>
    </fieldset>
    <div class="layui-form-item">
    <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="component-form-element">确 定</button>
    </div>
    </div>



    </form>
    </div>
    </div>
    </div>
    </div>
    </div>

    <script src="<%=request.getContextPath() %>/layui/layui.js"></script>
    <script src="<%=request.getContextPath() %>/js/jquery-1.11.1.min.js"></script>
    <script src="<%=request.getContextPath() %>/js/common.js"></script>
    <script type="text/javascript">
    var form,table;
    $(function(){
    layui.use([ 'form', 'table' ], function() {
    form = layui.form;
    table = layui.table;
    table.render({
    elem : '#carList',
    cellMinWidth : 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    cols : [ [ //标题栏
    {
    field : 'brand_name',
    title : '品牌',
    width : 120,
    edit : 'text'
    }, {
    field : 'model_name',
    title : '车型2',
    minWidth : 300,
    edit : 'text'

    }, {
    field : 'car_no',
    title : '车架',
    width : 180
    } ] ],
    data : [ {
    "brand_name" : "丰田",
    "model_name" : "2015款 皇冠 2.5L 豪华版",
    "car_no" : "JGG11111111111111"
    }, {
    "brand_name" : "丰田",
    "model_name" : "2015款 皇冠 2.5L 豪华版",
    "car_no" : "JGG11111111111111"
    } ]
    //,skin: 'line' //表格风格
    //,page: true //是否显示分页
    //,limits: [5, 7, 10]
    //,limit: 5 //每页默认显示的数量
    });
    });
    })
    </script>
    </body>
    </html>
    0 回复
  • @自在唯我 大佬 好使了,不知道谁把框架的table.js代码改了 谢谢你了
    0 回复
  • ......
    0 回复