JS数据获取工具类(一)
前期准备页面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width =device-width, initial-scale=1"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>JpAutoFramework</title> <meta content="victor" name="author"/> <link rel="stylesheet" href="../../Publics/css/styles.css"> <script type="text/javascript" src="../../FunctionJs.js"></script> <script type="text/javascript"> function load() { // bandTableEditor("data"); 绑定数据到页面 BandActionEditorToTable("Home?GetEditor", "data"); } function save() { // getFormJson("data"); 保存数据到页面, GetFormJsonAndSave("Home?Save","data"); } </script> </head > <body onload="load()" style="margin: auto"> <form> <table id="data" class="editorTable" style="margin: auto; width: 80%;"> <tr> <th> 编号 </th> <td> <input type="text" readonly="readonly" id="ID" /></td> </tr> <tr> <th> 项目名称 </th> <td> <input type="text" id="Names" /></td> </tr> <tr> <th> 消费类型 </th> <td> <select width="350px" id="TYPEID" action="Type?Get|ID&TypeName"></select></td> </tr> <tr> <th> 金额 </th> <td> <input type="text" id="PRICE" /></td> </tr> <tr> <th> 账目类型 </th> <td> <select type="text" id="ISOUT"> <option value="0">支出</option> <option value="1">收入</option> <option value="2">信用卡消费</option> <option value="3">信用卡还款</option> </select> </td> </tr> <tr> <th> 日期 </th> <td> <input type="text" id="Dates" /></td> </tr> <tr> <th> 描述 </th> <td> <textarea rows="10" cols="38" id="Remark"></textarea> </td> </tr> <tr> <td></td> <td> <div style="float: left" align="left"> <input type="button" class="btn0" onclick="save()" value="保存" align="right" /> </div> <div style="float: left; margin-left: 200px;" align="right"> <input type="button" onclick="CloseForm()" class="btn1" value="关闭" /> </div> </td> </tr> </table> </form> </body > </html >
1.绑定数据 到 编辑页面
/** * 绑定数据到 编辑 列表 * @param {} json json数据 * @param {} trName 前台模板tr id * @returns {} object */ function bandTableEditor(json, tableName) { //得到table 内的所有Input 并绑定 var table = document.getElementById(tableName); var inputs = table.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text") { var _id = inputs[i].id; var _value = eval("(json[0]." + _id + ")"); inputs[i].value = _value; } } //得到table 内的所有select 并绑定 var selects = table.getElementsByTagName("select"); for (var s = 0; s < selects.length; s++) { var select = selects[s]; var sid = select.id; try { var action = select.getAttribute("action").split('|'); var actionInfo = action[0]; var member = action[1].split('&'); var selectJson = Hander(actionInfo); // selectJson = '[{"ID":1,"TypeName":"餐饮"},{"ID":2,"TypeName":"服装"},{"ID":3,"TypeName":"住房"},{"ID":4,"TypeName":"交通"},{"ID":5,"TypeName":"教育"},{"ID":6,"TypeName":"通讯"},{"ID":7,"TypeName":"健康"},{"ID":8,"TypeName":"娱乐"},{"ID":9,"TypeName":"红包"},{"ID":10,"TypeName":"人情"},{"ID":11,"TypeName":"其他"}]'; // alert(selectJson); var jso = eval("(" + selectJson + ")"); var opt = ""; for (var js = 0; js < jso.length; js++) { var j = jso[js]; var valueMember = eval("(j." + member[0] + ")"); var dispalyMember = eval("(j." + member[1] + ")"); opt += "<option value=\"" + valueMember + "\">"+dispalyMember+"</option>"; } select.innerHTML = opt; } catch (e) { } //得到 table 所有文本域 var textareas = table.getElementsByTagName("textarea"); for (var t = 0; t < textareas.length; t++) { var tid = textareas[t].id; var tvalue = eval("(json[0]." + tid + ")"); textareas[t].value = tvalue; } } }
2.得到编辑好的数据
获取下图数据
/** * 得到编辑好的数据 * @param {} tableName table的Id * @returns {} object */ function getFormJson(tableName) { var table = document.getElementById(tableName); var inputs = table.getElementsByTagName("input"); //得到所有 input var json = "";// 格式 '{"ID":1,"TypeName":"餐饮"}' for (var i = 0; i < inputs.length; i++) { if (inputs[i].type != "button" && inputs[i].type != "submit") { var _id = inputs[i].id; var _value = inputs[i].value; json += '"' + _id + '":"' + _value + '",'; } } //得到所有select var selects = table.getElementsByTagName("select"); for (var s = 0; s < selects.length; s++) { var select = selects[s]; var id = select.id; var index = select.selectedIndex; // 选中索引 var value = select.options[index].value; // 选中值 alert(value); json += '"' + id + '":"' + value + '",'; } //得到 table 所有文本域 var textareas = table.getElementsByTagName("textarea"); for (var t = 0; t < textareas.length; t++) { var tid = textareas[t].id; var tvalue=textareas[t].value; json += '"' + tid + '":"' + tvalue + '",'; } return "{"+json+"}"; }以上方法中使用到了 Hander()方法 ,具体 点击打开链接 https://blog.csdn.net/qq_28254093/article/details/80045163