0

我已经搜索过，到目前为止，我发现的内容并不适用于我的需求。我有一个将数据加载到数据库中的 HTML5/JQuery 应用程序。然后，您可以输入员工 ID、姓名或姓氏（完整或部分），它会显示搜索项目的列表视图。我正在研究一种方法，在点击一个项目时，它会请求数据库并返回该项目的详细信息。

到目前为止，这是我的代码。任何帮助表示赞赏：

<div data-role=page id=home>
  <div data-role=header>
<h1>Home</h1>
 </div>

 <div data-role=content>
 <span> Employee Id </span>
 <input type=number pattern=[0-9]* id=empId>    
<span> Last name </span>
<input type=text id=lName>
<span> First name </span>
<input type=text id=fName>
<a href=# data-role=button id=search> Search Employee </a>
<input type="reset" value="Clear Values" data-theme="e" data-icon="delete"/>
</div>
</div>

<div data-role=page id=win2 data-add-back-btn=true>
  <div data-role=header>
  <h1>Results</h1>
  </div>

<div data-role=content>
</div>
</div>

<div data-role=page id=details data-add-back-btn=true>
 <div data-role=header>
 <h1>Details</h1>
 </div>
<div align="center"><img src="img/user.png"></div>
   <div data-role=content>
  </div>
</div>
</body>
</html>

<script>

var db = openDatabase ("Employees", "1.0", "MIT Employee DB", 65535);

 db.transaction (function (transaction) 
 {
    console.log("calling populateDB");
    populateDB(transaction);
 });

$("#search").bind ("click", function (event)
 {
var empid = $("#empId").val ();
db.transaction (function (transaction) 
 {
var sql = "select id, empid, fname, lname from Employees" + " where empid like '" + $("#empId").val() + "%' and fname like '" + $("#fName").val() + "%' and lname like '" + $("#lName").val() + "%' order by lname, fname";
transaction.executeSql (sql, undefined,  
function (transaction, result)
{
  var html = "<ul>";
  if (result.rows.length)
  {
    for (var i = 0; i < result.rows.length; i++) 
    {
      var row = result.rows.item (i);
      var lname = row.lname;
      var fname = row.fname;
      var empid = row.empid;
      var department = row.department;
      var hired = row.hired;
      var yos = row.yos;
      var mos = row.mos;
      html += "<li data-icon=false " + "id=" + empid + ">";
      html +=   "<a href=#details class=detailslink data-uid=" + empid + ">";
      html += lname + "&nbsp;" + fname;
      html +=   "</a>"; 
      html += "</li>";
    }
  }
  else
  {
    html += "<li> Not found </li>";
  }


  html += "</ul>";

   $("#win2").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#win2 div:jqmData(role=content)");
    $content.html (html);
    var $ul = $content.find ("ul");
    $ul.listview ();


  });        
  $.mobile.changePage ($("#win2"));
  }, error);
 });

});
// Details***********************************

$("#win2").bind ("tap", function (event)
{
var id = $(this).data('uid');
if (!id) return;

db.transaction (function (transaction) 
{
var sql = "SELECT * FROM Employees WHERE empid=?";
transaction.executeSql (sql, [id], 
function (transaction, result)
{ 
 console.log("Tapped");
var html = "<div align='center'>";
if (result.rows.length)
{
    for (var i = 0; i < result.rows.length; i++) 
    {
    var row = result.rows.item (i);
    var lname = row.lname;
    var fname = row.fname;
    var empid = row.empid;
    var department = row.department;
    var hired = row.hired;
    var yos = row.yos;
    var mos = row.mos
    html += "<b>Employee Id:</b> " + empid + "</p>";
    html += "<b>Name:</b> " + lname + "&nbsp;" + fname + "</p>";
    html += "<b>Department:</b> " + department + "</p>";
    html += "<b>Hire Date:</b> " + hired + "</p>";
    html += "<b>Service:</b> " + yos + "y / " + mos + "m</p>";
}
}
else
{
html += "No employee";
}
html += "</div>";

       $("#details").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#details div:jqmData(role=content)");
    $content.html (html);
     $('#details').html(html)


  });        
  $.mobile.changePage ($("#details"));


}, error);
  });
}); 

// End Details************************************************************      

function ok ()
{
}

function error (transaction, err) 
{
 alert ("DB error : " + err.message);
 return false;
}

</script>
<script src=js/employ.js></script>
4

1 回答 1

0

您可以做的一件事是将要点击的项目的 ID 设置为数据库中的关联 ID，或数据库中的其他一些唯一值。这样，您可以仅通过您点击的组件的 id 将该唯一值返回到数据库（它甚至不需要是 a，您可以使用 ap 来完成）。你也可以有 event.preventDefault(); 所以 a 没有做它计划的事情。

$("a").click(function(event) {
   console.log($(this).attr("id"));
});

除了执行 console.log 之外，您还可以对一些 php 代码执行 ajax 调用，该代码将从数据库中获取该项目的详细信息。

在该 ajax 查询的成功参数中，您可以调用另一个方法，该方法在 id（您“点击”的东西）之后立即显示适当的详细信息。

给它一点轻点。轻点轻点塔帕鲁。

于 2013-08-02T21:40:30.213 回答