0

私は検索しましたが、これまでのところ、私が見つけたものは私のニーズには当てはまりません. データを DB にロードする HTML5/JQuery アプリがあります。次に、従業員 ID、名前、または姓 (完全または部分的) を入力すると、検索項目のリストビューが表示されます。1 つのアイテムをタップすると、DB を再クエリし、そのアイテムの詳細を返す方法を検討しています。

これはこれまでの私のコードです。どんな助けでも大歓迎です：

<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

できることの 1 つは、タップするアイテムの 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 に答える