bootstrap editable插件编辑窗口点击不出来,肿么办?

按照网上的教程以及官网的方法加入代码了,但是即使我点击千万次,那个editable的窗口就是不跳出来。MD,心累了。

起初觉得是js排序的问题,但无论我怎么换js的位置,窗口还是出不来。jquery也是按官网换成 <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 也不行。

唯有来sf请教各位了,thanks in advance~

现在代码长这样子:

<html>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>GETWHAT路灯管理系统</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<!--     <script src="/Users/apple/Downloads/bootstrap-table-master/src/extensions/editable/bootstrap-table-editable.js"></script> -->
    
    <link href="bootstrap-editable-v1/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" />
    <script src="bootstrap-editable-v1/bootstrap-editable/js/bootstrap-editable.js"></script>
    
    <!-- Latest compiled and minified CSS -->
    <link href="bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="bootstrap-table-master/dist/bootstrap-table.min.js"></script>
    
    <!-- Latest compiled and minified Locales -->
    <script src="bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
        body{
            height:100%;
            width: 100%;
            margin:0;
        }
        .container{
            height:min-intrinsic;
        }
        .modal { 
            overflow: auto
        }
        #calculate{
            padding: 20px;
        }
        #calculate table{
            font-size: 15px;
            line-height:20px;
        }
    </style>
    <script>
    <!--源代码复制自:http://www.cnblogs.com/landeanfen/p/5821192.html-->
         $(function () {
            $('#department').editable({
                type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
                source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
                title: "选择部门",           //编辑框的标题
                disabled: false,           //是否禁用编辑
                emptytext: "空文本",       //空值的默认文本
                mode: "popup",            //编辑框的模式:支持popup和inline两种模式,默认是popup
                validate: function (value) { //字段验证
                    if (!$.trim(value)) {
                        return '不能为空';
                    }
                }
            });
    
        });
    </script>
<body>
    <div class="container">
        <div id="toolbar">
            <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增账单
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改/查看
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <a href="#" id="department">选择部门</a>
        </div>
        <!--     bill list table     -->
        <table id="table" data-toolbar="#toolbar" 
        data-click-to-select="true" 
        data-select-item-name="bill"
        data-pagination="true"
        data-search="true"
        data-show-refresh="true"
        data-page-size="50">
        </table>
        <!--    end bill list table      -->
    </div>
</body>
</html>
阅读 6.7k
2 个回答

你的代码,除了bootstap有cdn引用外,都没有相应的在线资源引用。。。本地跑不起来,复现成本太高了。建议你把你用的库都换成CDN资源。

然后,看了一下你的代码,有个大问题就是。你的script标签在head里面,这个时候dom都还解析出来,你就获取了dom,初始化事件,当然是不成功的。

第一种这么改。

$(document).ready(function(){
  $('#department').editable({
    type: "select", //编辑框的类型。支持text|textarea|select|date|checklist等
    source: [{
      value: 1,
      text: "开发部"
    }, {
      value: 2,
      text: "销售部"
    }, {
      value: 3,
      text: "行政部"
    }],
    title: "选择部门", //编辑框的标题
    disabled: false, //是否禁用编辑
    emptytext: "空文本", //空值的默认文本
    mode: "popup", //编辑框的模式:支持popup和inline两种模式,默认是popup
    validate: function(value) { //字段验证
      if (!$.trim(value)) {
        return '不能为空';
      }
    }
  });
});

或者第二种就是直接把script里这一串都移到body底部去。

你把控制台截个图吧。不然不知道什么问题。或者你把你的资源都用CDN的

<script>
//<!--源代码复制自:http://www.cnblogs.com/landeanfen/p/5821192.html-->
     $(function () {
        $('#department').editable({
            type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
            source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
            title: "选择部门",           //编辑框的标题
            disabled: false,           //是否禁用编辑
            emptytext: "空文本",       //空值的默认文本
            mode: "popup",            //编辑框的模式:支持popup和inline两种模式,默认是popup
            validate: function (value) { //字段验证
                if (!$.trim(value)) {
                    return '不能为空';
                }
            }
        });

    });
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题