我遇到的问题是，我试图将可编辑内容引入Bootstrap 3的AdminLTE主题中，无论我如何尝试，我试图使可编辑内容的链接都保留为链接，并拒绝被插件接收。这是任务页面本身，其中包含包含注释的表格。
编辑-这是包含注释的表的屏幕截图的链接，我正在尝试使“注释”字段可编辑-http: //puu.sh/aWivX/b52a53d1cc.png
<?php
include('includes/header.php');
include_once('../class/database.php');
$con = new DBCon();
?>
<section class='col-lg-12 DBConedSortable'>
<div class='row'>
<div class='box box-primary' style='padding: 10px;'>
<div class='box-header'><h3 class='box-header'>All Tasks</h3><h5>Ordered By Progress</h5></div>
<div class='box-body no-padding'>
<table class='table table-striped'>
<th>ID</th>
<th>Task</th>
<th>Comments</th>
<th>Assigned To</th>
<th>% Completion</th>
<?php $con->taskhandler(); ?>
</tbody>
</table>
</div>
</div>
<!-- End Tasks Table -->
</div>
</div>
</section>
</section>
</section>
</aside>
</div>
<!-- jQuery 2.0.2 -->
<!-- Replaced local 2.0.2 w/ CDN Hosted 2.0.3 -->
<!--
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>
这是连接到数据库并提取注释和相关信息的功能：
public function taskhandler() {
$this->mysqli = new mysqli($this->host,$this->user,$this->pass,$this->db);
$sqltdash = mysqli_query($this->mysqli,"SELECT * FROM admin_tasks ORDER BY percent ASC") or die ("Could not retrieve tasks from database!" . mysqli_error($this->mysqli));
while($r_tdash = mysqli_fetch_array($sqltdash)) {
echo "<tr>";
echo "<td class='id'>".$r_tdash['id']."</td>";
echo "<a href='tasks.php'><td class='task'>".$r_tdash['task-short']."</td></a>";
echo "<td class='comments'><a href='#' id='comment' class='editable' data-type='text' data-placement='right' data-pk=".$r_tdash['id']."' data-url='admin/includes/post-task.php' data-title='Add Comment'>".$r_tdash['comments']."<a/></td>";
echo "<td class='created'>".$r_tdash['creator']."</td>";
echo "<td><div class='progress xs'>";
if($r_tdash['percent'] < "100") {
echo "<div class='progress-bar progress-bar-danger' style='width: ".$r_tdash['percent']."%'></div>";
} else {
echo "<div class='progress-bar progress-bar-success' style='width: ".$r_tdash['percent']."%'></div>";
}
echo "</td></div>";
if($r_tdash['percent'] < "100") {
echo "<td><span class='badge bg-red'>".$r_tdash['percent']."%</span>";
} else {
echo "<td><span class='badge bg-green'>".$r_tdash['percent']."%</span>";
}
echo "</tr>";
}
}
这是我的main.js，它通过PHP的头文件包含在其中（也包含在下面）
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'popup';
//make username editable
$('#comment').editable({
type: 'text';
url: 'admin/includes/task-post.php';
placement: 'right';
title: 'Enter Comment;';
});
/*make status editable - commented during debug
$('#status').editable({
type: 'select',
title: 'Select status',
placement: 'right',
value: 2,
source: [
{value: 1, text: 'status 1'},
{value: 2, text: 'status 2'},
{value: 3, text: 'status 3'}
]
*/
//uncomment these lines to send data on server
,pk: 1
,url: 'includes/post-task.php'
});
});
这是通过CDN包含xeditable库的标头
<?php
session_start();
if(!isset($_SESSION['logged'])) {
echo "<center>";
echo "<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<!-- font Awesome -->
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css' />
<!-- Ionicons -->
<link href='css/ionicons.min.css' rel='stylesheet' type='text/css' />
<!-- Theme style -->
<link href='css/AdminLTE.css' rel='stylesheet' type='text/css' />";
die("<div class='box-body'><div class='callout callout-danger'><h1><i class'fa fa-ban'></i><b>Alert!</b> You are not logged in!
<a href='login.php'>Log In</a></div></div></h1>");
}
echo "</center>";
include_once('../class/database.php');
include('../class/sitevars.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $site_title; ?></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- Replaced local 2.0.2 w/ CDN Hosted 2.0.3 -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="main.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
问题在于，无论我如何尝试，表中的链接都将保留为链接，并且不会变成可编辑的字段，并且现在完全击败了我。任何建议将不胜感激。
我遇到了同样的问题，事实证明，原因是我在jQuery和插件文件之前加载了x可编辑的初始化函数（AdminLTE在页面底部加载了脚本）。当我正确订购脚本时，x-editable可以正常工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句