按照网上的教程以及官网的方法加入代码了,但是即使我点击千万次,那个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>
你的代码,除了bootstap有cdn引用外,都没有相应的在线资源引用。。。本地跑不起来,复现成本太高了。建议你把你用的库都换成CDN资源。
然后,看了一下你的代码,有个大问题就是。你的script标签在head里面,这个时候dom都还解析出来,你就获取了dom,初始化事件,当然是不成功的。
第一种这么改。
或者第二种就是直接把script里这一串都移到body底部去。