jQuery学习之九-----jQuery解析XML文件序（自己写的）
1、主要的业务逻辑就是客户要求点击添加按钮能够将参加会议的参加人添加进去，然后点击删除按钮能够将其删掉，但是前提是点击添加之后不仅要在web前段加上所添加的那个人，而且还有在缓存中保存所添加的人员。因为点击添加按钮不是要和服务器端做交互。点击提交审批的时候才是要和服务器端做交互。部分代码如下：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>费用明细</title> 7 <link href="../css/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" /> 8 <link href="../css/jqm-docs.css" rel="stylesheet" type="text/css" /> 9 <script src="../Scripts/jquery.js" type="text/javascript"></script> 10 <script src="../Scripts/jqm-docs.js" type="text/javascript"></script> 11 <script src="../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script> 12 <link href="../css/mytheme.min.css" rel="stylesheet" type="text/css" /> 13 <script src="../Scripts/smart.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 $(document).ready(function () { 16 $("#selectemployeetype").change(function () { 17 var checkvalue = $("#selectemployeetype").val(); 18 if (checkvalue == 'AK') { 19 $("#dvcompany").css("visibility", "visible"); 20 //$("#dvtotal").css("visibility","visible"); 21 } 22 if (checkvalue == 'AL') { 23 $("#dvcompany").css("visibility", "hidden"); 24 //$("#dvtotal").css("visibility", "hidden"); 25 } 26 }); 27 28 }); 29 </script> 30 </head> 31 <body> 32 <div data-role="page" id="addcreditdata"> 33 <link href="../Scripts/popup/jquery.mobile.simpledialog.min.css" rel="stylesheet" 34 type="text/css" /> 35 <script src="../Scripts/popup/jquery.mobile.simpledialog2.js" type="text/javascript"></script> 36 <link href="../css/Grid.css" rel="stylesheet" type="text/css" /> 37 <script type="text/javascript"> 38 $('#addcreditdata').bind('pageinit', function (event) { 39 $("#btnsave").click(addattendinfo); 40 }); 41 //添加参加者信息 42 function addattendinfo() { 43 var name = $("#txtcnname").attr("value"); 44 if (name == '') { 45 popupinfo('请填写参加者的姓名!'); 46 return; 47 } 48 var checktext = $("#selectemployeetype").find("option:selected").text(); 49 var checkvalue = $("#selectemployeetype").val(); 50 var type = ''; 51 var txtcompany = ''; 52 if (checkvalue == 'AK') { 53 type = 2; 54 txtcompany = $("#txt_sCompany").attr("value"); 55 if (txtcompany == '') { 56 popupinfo("请填写公司名称！"); 57 return; 58 } 59 } 60 else { 61 type = 1; 62 } 63 var xmlparam = ''; 64 if (window.localStorage["smt_expenseattendee"] == '') { 65 xmlparam += '<DataTable name="smt_expenseattendee"><Row REPORTNO="SMT000002909" LINENUMBER="" NAME="' + name + '"'; 66 xmlparam += ' TYPE="' + type + '" COMPANY="' + txtcompany + '" ITEMNO="564dd29a-be27-4086-8b8f-2499e0a0ec5c"/></DataTable>'; 67 window.localStorage["smt_expenseattendee"] = xmlparam; 68 } else { 69 var xmlrow = '<Row REPORTNO="SMT000002909" LINENUMBER="" NAME="' + name + '" TYPE="' + type + '" COMPANY="' + txtcompany + '" ITEMNO="564dd29a-be27-4086-8b8f-2499e0a0ec5c"/></DataTable>'; 70 xmlparam = window.localStorage["smt_expenseattendee"].replace("</DataTable>", xmlrow); 71 window.localStorage["smt_expenseattendee"] = xmlparam; 72 } 73 showattendinfo(window.localStorage["smt_expenseattendee"]); 74 } 75 //绑定参加者信息 76 function showattendinfo(u) { 77 $('#selectu').html(''); 78 var id = 0; 79 $(u).find("Row").each(function (i) { 80 id = id + 1; 81 var name = $(this).attr('NAME'); 82 var type = $(this).attr('TYPE'); 83 var companytype = ''; 84 if (type == '1') { 85 companytype = 'Internal(employee)'; 86 } 87 else { 88 companytype = 'External(non-employee)'; 89 } 90 var txtcompany = $(this).attr("COMPANY"); 91 var html = '<input type="radio" name="radio-user" id="radio-choice-' + id + '" value="' + name + '#' + companytype + '#' + txtcompany + '"/>'; 92 html += '<label for="radio-choice-' + id + '"><div class="ui-grid-c"><div class="ui-block-a" style="text-align: center;"><strong>' + id; 93 html += '</strong></div><div class="ui-block-b" style="text-align: center;"><strong>' + name + '</strong></div><div class="ui-block-c" style="text-align: center;"><strong>' + companytype; 94 html += '</strong></div><div class="ui-block-d" style="text-align: center;"><strong>' + txtcompany + '</strong></div></div></label>'; 95 $('#selectu').append($(html)); 96 }); 97 //$('#addcreditdata').page('destroy').page(); 98 }; 99 </script> 100 <div data-role="header" style="height: 44px; text-shadow: none;" data-position="inline"> 101 <h1> 102 参加者信息</h1> 103 </div> 104 <div data-role="content"> 105 <ul data-role="listview" data-divider-theme="b" data-inset="true" id='pagelist'> 106 <li data-role="list-divider" role="heading">参加者列表</li> 107 <li data-theme="b"> 108 <div class="ui-grid-c" id="Div2"> 109 <div class="ui-block-a"> 110 <div class="ui-bar ui-bar-a" style="height: 25px; text-align: center; text-shadow: none;"> 111 行号</div> 112 </div> 113 <div class="ui-block-b"> 114 <div class="ui-bar ui-bar-a" style="height: 25px; text-align: center; text-shadow: none;"> 115 姓名</div> 116 </div> 117 <div class="ui-block-c"> 118 <div class="ui-bar ui-bar-a" style="height: 25px; text-align: center; text-shadow: none;"> 119 类型</div> 120 </div> 121 <div class="ui-block-d"> 122 <div class="ui-bar ui-bar-a" style="height: 25px; text-align: center; text-shadow: none;"> 123 公司</div> 124 </div> 125 </div> 126 <fieldset data-role="controlgroup" id="selectu"> 127 <!--<input type="radio" name="radio-user" id="radio-choice-1" value="1" /> 128 <label for="radio-choice-1"> 129 <div class="ui-grid-c"> 130 <div class="ui-block-a" style="text-align: center;"> 131 <strong>1</strong> 132 </div> 133 <div class="ui-block-b" style="text-align: center;"> 134 <strong>梁占鹏</strong></div> 135 <div class="ui-block-c" style="text-align: center;"> 136 <strong>Internal</strong></div> 137 <div class="ui-block-d" style="text-align: center;"> 138 <strong>oval-tech</strong></div> 139 </div> 140 </label> 141 <input type="radio" name="radio-user" id="radio-choice-2" value="1" /> 142 <label for="radio-choice-2"> 143 <div class="ui-grid-c"> 144 <div class="ui-block-a" style="text-align: center;"> 145 <strong>2</strong> 146 </div> 147 <div class="ui-block-b" style="text-align: center;"> 148 <strong>张三</strong></div> 149 <div class="ui-block-c" style="text-align: center;"> 150 <strong>Internal</strong></div> 151 <div class="ui-block-d" style="text-align: center;"> 152 <strong></strong> 153 </div> 154 </div> 155 </label>--> 156 </fieldset> 157 </li> 158 <li data-role="list-divider" role="heading">参加者编辑</li> 159 <li data-theme="b" style="height: 155px;"> 160 <div class="ui-grid-basic_add"> 161 <div style="width: 15%; text-align: right; margin-top: 15px; float: left; min-height: 1px;"> 162 <label> 163 姓名：</label> 164 </div> 165 <div style="width: 85%; float: left; min-height: 1px;"> 166 <input id="txtcnname" placeholder="" value="" type="text" /> 167 </div> 168 <div style="width: 15%; text-align: right; margin-top: 15px; float: left; min-height: 1px;"> 169 <label> 170 类型：</label> 171 </div> 172 <div style="width: 85%; float: left; min-height: 1px;"> 173 <select name="selectmenu2" id="selectemployeetype"> 174 <option value="AL">Internal(employee)</option> 175 <option value="AK">External(non-employee)</option> 176 </select> 177 </div> 178 <div id="dvcompany" style="visibility: hidden;"> 179 <div style="width: 15%; text-align: right; margin-top: 15px; float: left; min-height: 1px;"> 180 <label> 181 公司：</label> 182 </div> 183 <div style="width: 85%; float: left; min-height: 1px;"> 184 <input id="txt_sCompany" placeholder="" value="" type="text" /> 185 </div> 186 </div> 187 <div id="dvtotal" style="visibility: hidden;"> 188 <div style="width: 15%; text-align: right; margin-top: 15px; float: left; min-height: 1px;"> 189 <label> 190 参加者总数：</label> 191 </div> 192 <div style="width: 34%; float: left; min-height: 1px;"> 193 <input id="txt_sAttendantQty" placeholder="" value="" type="text" /> 194 </div> 195 <div style="width: 15%; text-align: right; margin-top: 15px; float: left; min-height: 1px;"> 196 <label> 197 其他：</label> 198 </div> 199 <div style="width: 34.5%; float: left; min-height: 1px;"> 200 <input id="txt_sAttendantList" placeholder="" value="" type="text" /> 201 </div> 202 </div> 203 </div> 204 </li> 205 </ul> 206 </div> 207 <div style="height: 35px; text-align: right; padding-top: 2px;" data-role="footer" 208 data-position="fixed" data-theme="a"> 209 <a href="#" id='btnsave' style="width: 70px;" data-role="button" data-theme="b">添加</a> 210 <a href="#" id='A1' style="width: 70px;" data-role="button" data-theme="b">删除</a> 211 <a href="expensedetail.htm" id='A2' style="width: 70px; margin-right: 20px;" data-role="button" 212 data-theme="b">完成</a> 213 </div> 214 </div> 215 </body> 216 </html>
难点：本操作的难点就是拼接字符串，因为所添加的用户是动态添加的，动态添加好之后还要往缓存里面放一份。当append的时候先判断缓存里面有没有，如果没有的话，就去品字符串拼一个DataTable出来，如果缓存里面有的话，先读取缓存里面的内容，在将添加的参加者拼接到DataTable里面。然后动态的显示。在asp.net中有DataTable，但是在jquerymobile中没有现成的DataTable,需要自己动手去拼字符串，拼出DataTable，这样才能达到我们想要显示的效果。