SERVICE


云启未来,智造互联
企业上云升级,助力企业腾飞

济南网页设计html5技术分享:调用loadnote0方法&创建留言表

发布时间:2016-12-15 13:27:56您的位置: > 微信开发,小程序开发 > 正文

专业提供济南网站建设服务,丰富的济南网站设计和济南网站制作经验,为企业公司提供济南网站建设,济南网站设计,济南网站开发,手机网站。html5技术分享
9.2,4创建留言表这里的留言表需要3列,如下所示。9.2实例21:在客户端关系数据库中保存数据●139    title    留言的标题,以便于引用    Note    留言    下面编写一个方法来创建数据库表:Download htm15sql/javascripts/notesis    createNotesTable=function()    {    db.transaction(function(tx){    tx.executeSql(    "CREATE TABLE notes (id INTEGER\    PRIMARY KEY, title TEXT, note TEXT)¨,  [],    function()t alert(’Notes database created sUccessfu77y!.);),    function(tx, error){ alert(error.message);  ));    ));    ):    我们在事务中触发SQL语句。该事务包含两个回调方法,一个针对执行成功的情况,一个针对执行失败的情况。这是以后类似动作中使用的通用模式。    注意,executeSql()方法的第二个参数是个数组。该数组用来将SQL中的占位符绑定到变量。这样便避免了拼接字符串,同其他语言中的prepare话句类似。此处,数组是空的,因为我们的示例中无需任何占位符。    现在第一个数据库表就建好了,下面我们要让这个应用真正做点实际的操作。9.2.5加载留言    我们希望应用加载的时候连接到数据库(如果数据库表不存在就创建一个)然后从数据库中获取所有的留言。Oownload htm15sqlOavascripts/notes.js//从数据库的notes表中获取所有记录fetchNotes=function(){  db.transaction(function(tx){    tx.executeSql('5:ELECT id, tit7e, note FROM notes',  []    functioncsoLTransaction, data){    for (var j=0;j<data.rows.length; ++i){140◆第9章客户端数据的使用var  row = data.rows.item(i) ;var id = row['id'];var title = row[ 't/t7e'] ;    addToNotesList(id,  title);    )    ));    ));    );    该方法从数据库中获取所有记录。如果获取成功,就遍历所有记录,调用addNoteToList方法,该方法如下所示:    Download htm15sql/jovoscripts/notes.Js    //指定id和标题,将列表项添加到留言列表    addToNotesList=function(id, title){    var notes=$(¨#notes¨);    var item=$(”<7彳>”);    item.attr( "data-id",id);    item.html (title);    notes.append(item);    );    我们将记录的ID嵌入到自定义的数据属性中。然后在用户单击列表项的时候,我们会使用该ID定位数据库中的记录。然后将新创建的列表项连同notes的ID -起插入到前端的无序列表中。现在我们需要编写加载数据的代码,以便在用户在列表中进行选择的时候将其加载到表单中。91216获取指定记景    我们可以为每个列表项都添加一个click事件,但实践经验告诉我们,有更好的方法,那就是监听整张无序列表中的单击事件,然后判断被单击的项。这样的话,如果列表中的项增加了(比如添加了一条留言),也无需为其再添加单击事件了。    在iQuery函数中,添加如下代码:Download htm15sqUjavoscripts/notes.js$( "#notes") .click(function(event) t if ($(event.target).is('7/'》 {   var element = $(event.target);             loadNote (el ement . att r ( "da ta-id "》   }));它会调用loadNote0方法,该方法如下:Download htm15sql/javascripts/notes.js9.2实例21:在客户端关系数据库中保存数据●141loadNote = function(id){ db.transaction(function(tx) {    tx.executeSql('SELECT /d, tit7e, note FROM notes where id = ?', [id]    function(SQLTransaction, data){      var row = data.rows.item(0);      var title = $("#tit7e");              var  note  =  $( "#note") ;)));))title.val(row["tit7e"]); ti tl e . attr( "data-/d" ,    row [ "/d"])note.val(row[ "note"]) ;$("#de7ete_button").show();    此函数同先前的fetchNotes0很像。其中触发一条SQL语句,然后处理成功的情况。这里的语句中包含一个问号占位符,其实际值以数组元素的形式写在第二个参数中。    当查找到某条记录的时候,就将其显示在表单中。该方法同时还会启用Delete按钮,并将记秉的ID嵌入到自定义数据属性中,这样便于处理更新操作。Save按钮会检测ID是否存在。如果存在,就更新记录。如果不存在,就认为它是一条新记录。下面我们来编写这段逻辑。9.2.7插入、更新和删除记录    当用户单击Save按钮的时候,要触发代码来进行新数据插入或者更新已有数据。我们将在Save按钮上添加一个单击事件处理程序,方法是将下面的代码添加到iQuery函数中:Download htm15sql/javascripts/nofes.js$( "#save_button") .click(function(event) {   event.preventDefault() ; var title = $("#tit7e");  var note = $("#note");if(title.attr("data-id"》{   updateNote(title, note);}else{   insertNote(title, note);   }});    此方法检测表单中标题域的data-id属性。如果没有ID,表单认为用户在添加新记录,便会触发insertNote方法,此方法如下:
梦之网科技 http://www.mzwkj.com

梦之网科技
本文网址:http://www.mzwkj.com/news/781.html

济南梦之网科技:济南网站建设,济南网站设计公司,网站建设开发公司,专业网站制作公司,拥有专业的技术团队,一流的服务团队.专业团队为您提供网站设计,网站定制服务,公众号应用开发,微信小程序开发,为用户提供成套解决方案,智能农业物联网系统

您可能感兴趣