Question

我试图在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

?>

网格看起来很好，第一个被加载...我一直在寻找解决方案，我错过了什么？您可以在页面here

中看到它

Answer 1

为什么"css/redmond/jquery- ui-1.10.1.custom.css"中有这么多空格？可能你应该使用"css/redmond/jquery-ui-1.10.1.custom.css"并解决问题？

下一个重要问题：您必须先包含"js/jquery-1.9.0.min.js" "js/jquery-ui-1.10.1.custom.js"之前使用它。

下一个小问题：您不需要包含“js / jquery.ui.draggable.js”和“js / jquery.ui.droppable.js”。该代码已经是"js/jquery-ui-1.10.1.custom.js"

的一部分

你应该小心你使用的字符。您发布的代码包含"#list2″和"pager2″而非"#list2"和"pager2"的部分地点。你应该修复代码。

Answer 2

我发现了问题，就在这行：。jQuery的（ “＃列表”）的jqGrid（ 'gridDnD'，{connectWith： '＃列表2'}）; jQuery的（“＃列表2”）的jqGrid（ 'gridDnD'，{connectWith： '＃列表'}）;

这两行在$（function（）{}）之外;

感谢oleg的帮助，虽然2行代码在外面，但你提供的awnser是完全正确的。我刚刚测试过。

拖放行的jqgrid

2 个答案: