2 つのグリッド間で行のドラッグ アンド ドロップを実装しようとしています。しかし、私がそれをしようとすると、何も起こりません。これが私のコードです。
<?php
session_start();
if(!isset($_SESSION['nome']))
{
header("location: index.html");
}
else
{
}
// be sure to put text data in CDATA
?>
<html>
<head><title>Eulen</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8″>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery- ui-1.10.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
</style>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery.ui.droppable.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});
//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});
/ /Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
<style type="text/css" media="screen">
#sidemenu a {
border-bottom: 1px solid #F6F7F9;
border-top: 1px solid #F6F7F9;
color: #596677;
display: block;
padding: 9px 26px 9px 15px;
text-decoration: none;
}
#sidemenu a:hover {
background: none repeat scroll 0 0 #EDF1F5;
border-bottom: 1px solid #DCE7F0;
border-top: 1px solid #DCE7F0;
color: #3F4C59;
text-decoration: none;
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
</style>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'gettags.php',
width:600,
datatype: 'xml',
mtype: 'GET',
colNames:['ID','Estação','Nome Cliente','Piso','Descrição'],
colModel :[
{name:'id_tag', index:'id_estacaotag',hidden:true},
{name:'nome', index:'nome'},
{name:'nome2', index:'nome2'},
{name:'id_piso', index:'id_piso'},
{name:'descricao', index:'descricao'},
],
pager: '#pager',
hidegrid: false,
rowNum:10,
rowList:[10,20,30],
sortname: 'nome',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Tags'
});
$("#list").jqGrid('navGrid','#pager',{
edit:false,
add:false,
del:false,
search:false
});
});
</script>
<script type="text/javascript">
$(function(){
$("#list2″).jqGrid({
width:600,
datatype: 'xml',
mtype: 'GET',
colNames:['ID','Estação','Nome Cliente','Piso','Descrição'],
colModel :[
{name:'id_tag', index:'id_estacaotag',hidden:true},
{name:'nome', index:'nome'},
{name:'nome2', index:'nome2'},
{name:'id_piso', index:'id_piso'},
{name:'descricao', index:'descricao'},
],
pager: '#pager2',
hidegrid: false,
rowNum:10,
rowList:[10,20,30],
sortname: 'nome',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Ronda'
});
$("#list2″).jqGrid('navGrid','#pager2',{
edit:false,
add:false,
del:false,
search:false
});
});
jQuery("#list").jqGrid('gridDnD',{connectWith:'#list2'});
jQuery("#list2″).jqGrid('gridDnD',{connectWith:'#list'});
</script>
</head>
<body style="margin: 0px;padding: 0px; font-style: courier">
<div style="width: 100%;height: 100%;min-width: 1000px;min-height: 600px">
<div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
<div class="dropdown" style="float: right;right:50px;top:50%">
<a class="account" ><b>Bem Vindo,<?php $t=$_SESSION['nome'];echo $t;?></b></a>
<div class="submenu">
<ul class="root">
<li ><a href="changepass.php" >Alterar Password</a></li>
<li ><a href="logout.php" >Logout</a></li>
</ul>
</div>
</div>
</div>
<div style="float: left; width: 100%;height: 85%">
<span id="sidemenu" style="float: left; width: 15%;height: 100%;background-color:#F6F7F9;">
<a href="admin.php">Inicio</a>
<a href="adminclientes.php">Clientes</a>
<a href="adminlocais.php">Locais</a>
<a href="admintags.php">Tags</a>
<a href="adminusers.php">Utilizadores</a>
<a href="admintypeofuser.php">Tipo de Utilizadores</a>
</span>
<span style="float: left;width: 70%;height: 100%;">
Nome da Ronda: <input type="text" name="nomeronda" id="nomeronda"><br><br>
Utilizador:<select>
<?php
$db = mysqli_connect("localhost","user","*****");
// select the database
mysqli_select_db($db,"onetag51_db_metro");
$SQL = "SELECT * FROM utilizadores ";
$result = mysqli_query( $db,$SQL ) or die("Couldn't execute query.".mysqli_error($db));
while($row = mysqli_fetch_array($result,MYSQL_ASSOC)) {
echo "<option value='".$row['id_utilizador']."'>".$row['nome']."</option>";
}
?>
</select>
<table id="list"></table> <div id="pager"></div></script>
<br>
<br>
Ronda:<br>
<table id="list2″></table> <div id="pager2″></div></script>
</span>
</div>
</div>
</body>
</html>
<?php
?>
グリッドは正常に表示され、最初のグリッドがロードされました...解決策を探していましたが、何か不足していますか? こちらのページでご覧いただけます