我已经编写了这段代码来从 DB 中检索值并将其放入 listitem 中,它工作正常这里是我的 html 代码:我已经添加了所有插件。
<html>
<head>
$('#showcollapsed li').live('click',function(event)
{ var txt = $(this).text();
window.localStorage.setItem("clickedValueofList",txt);
$.mobile.changePage('#viewInformation',null,true,true);
getDataofSelectedListItem();
});
这是我的代码,但它不能正常工作。
$('#list1').on('click','li',function()
{
$(this).hide();
$('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
});
$('#editTextBox').focusout(function()
{
//$('#list1').listview('refresh');
$(this).hide();
$(this).siblings('#list1').show().text($(this).val());
});
</head>
<body>
<div data-role="page" id="viewUser" data-theme="d">
<div data-role="header" data-theme="e" class="ui-bar ui-bar-e">
<a href="#" id="backbtn" data-role="button" data-icon="arrow-l">BACK</a>
<h3>STUDENT INFO</h3>
</div>
<div data-role="content">
<a href="#" id="showinfo" data-role="button" style="width:100px;">SHOW</a>
<div data-role="collapsible-set" id="showinfodiv" data-theme="b" data-content-theme="d">
<div data-role="collapsible" id="showcollapsed" data-collapsed-icon ="plus" data-iconpos="left">
<h3>user names</h3>
<ul id="list" content-editable="true" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..." data-filter-theme="e"></ul>
<li content-editable="true">fdfdfd</li>
</div>
</div>
</div>
</div>
<div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
<div data-role="header" id="headerid" class="ui-bar ui-bar-b">
<h3></h3>
</div>
<div data-role="content" id="contentid">
<ul id="list1" data-role="listview" data-theme="e"></ul>
<input type="text" id="editTextBox" style="display:none"/>
<a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a>
</div>
</div>
</body>
</html>
现在我的下一个任务是编辑动态列表项,这意味着当用户单击第一个列表项时,列表项应该被 TEXTBOX 替换,并且当用户完成编辑时,其余未点击的列表项将保持不变,现在文本框应该是隐藏的和最近的编辑文本应该出现在列表项中,与列表项的其余部分类似,但用户一次只能编辑一个列表项。很难实现这一目标。
.js 代码:
//从数据库中获取数据并将其动态放入列表视图中,它工作正常
function getDataofSelectedListItem()
{
alert("getDataofSelectedListI");
clickedListItem = window.localStorage.getItem("clickedValueofList");
console.log("clicked list item"+clickedListItem);
//db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';
console.log("selected list query:"+sqlQuery);
db.transaction(function(tx)
{
tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
},errorCB,successCB);
}
function successCBofListItem(tx,results)
{ alert("erer");
if(results != null && results.rows != null && results.rows.length > 0)
{ alert("fdfdf");
$('#list1').append('<li> UserName: '+results.rows.item(0).username+'</li>');
$('#list1').append('<li> Password:' +results.rows.item(0).password+'</li>');
$('#list1').append('<li> Emailid:' +results.rows.item(0).emailid+'</li>');
console.log("username:" + results.rows.item(0).username);
console.log("emailid:" + results.rows.item(0).emailid);
console.log("password:" + results.rows.item(0).password);
}
$('#list1').listview('refresh');
}
function errorCBofListItem()
{
alert("errorCBofListItem");
}
这是我的代码,但它不能正常工作。
$('#list1').on('click','li',function()
{
$(this).hide();
$('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
});
$('#editTextBox').focusout(function()
{ $(this).hide();
$(this).siblings('#list1').show().text($(this).val());
});