form表單互動/table/ul li
阿新 • • 發佈：2018-12-31
一.form互動
（1）.jQuery通過ajax獲得後臺json資料給form表單賦值
1.form
<form class="print-info clearfix" id="print-info"> <div class="print-info-row"> <label>姓名:</label> <input type="text" name="brxm00" value="小小高"> </div> <div class="print-info-row" style="width: 190px;"> <label>門 診 號:</label> <input type="text" name="zyhghh" value="12345678" > </div> <div class="print-info-row" style="width: 214px;"> <label>申請醫生:</label> <input type="text" name="sqysxm" value="小高高" > </div> <div class="print-info-row" style="width: 220px;margin: 0px 0 0px;"> <label>申請時間:</label> <input type="text" name="sqrqsj" value="2018-01-16 10:36" > </div> <div class="print-info-row"> <label>性別:</label> <input type="text" name="brxb00" value="女"> </div> </form>
2.json.txt (介面資料格式)
{
"brxm00": "陳步卜",
"brxb00": "男",
"zyhghh": "0987654321",
"sqysxm":"吳聊聊",
"sqrqsj": "2018-01-17 10:36:17",
}
3.js
$(function () { $.getJSON('json.txt',function(data){ console.log(data) $("#print-info").setForm(data); }); }); $.fn.setForm = function(jsonValue){ var obj=this; $.each(jsonValue, function (name, ival) { var $oinput = obj.find("input[name=" + name + "]"); if ($oinput.attr("type")== "radio" || $oinput.attr("type")== "checkbox"){ $oinput.each(function(){ if(Object.prototype.toString.apply(ival) == '[object Array]'){//是複選框，並且是陣列 for(var i=0;i<ival.length;i++){ if($(this).val()==ival[i]) $(this).attr("checked", "checked"); } }else{ if($(this).val()==ival) $(this).attr("checked", "checked"); } }); }else if($oinput.attr("type")== "textarea"){//多行文字框 obj.find("[name="+name+"]").html(ival); }else{ obj.find("[name="+name+"]").val(ival); } }); }
(2).提交form的資料
1.防止頁面跳轉 action=" " ，同時提交按鈕改成input type="button"
<form class="modalNew-form form-horizontal" id="zbqwzForm "> <div class="row"> <div class="col-md-4 col-lg-4"> <div class="zblist-group "> <label for="cryzd0">出入院診斷符合率</label> <input name="cryzd0" type="text" /> <span>%</span> </div> </div> <div class="col-md-4 col-lg-4"> <div class="zblist-group "> <label for="ssqhzd">手術前後診斷符合比率</label> <input name="ssqhzd" type="text" /> <span>%</span> </div> </div> <div class="col-md-4 col-lg-4"> <div class="zblist-group "> <label for="lcblzd">臨床和病理診斷符合比率</label> <input name="lcblzd" type="text"/> <span>%</span> </div> </div> </div> <button type="button" class="btn fk-btn-29a2ff" id="saveBtn">儲存</button> </form> $("#saveBtn").click(function(){ var data = $("#zbqwzForm input").serializeArray(); data = JSON.stringify(data); })
2.注意：如果要提交成：{ "lcblzd":"100%","ssqhzd":"90%"}
function mapToModel(formData, isTrim, isLowerCase) {
var oData = new Object();
if (formData == undefined || formData == "")
return oData;
$.each(formData, function (index, data) {
if (data.value !== undefined && data.value !== "")
if (isLowerCase === true)
oData[data.name.toUpperCase()] = isTrim === true ? data.value.trim() : data.value;
else if (isLowerCase === false)
oData[data.name.toLowerCase()] = isTrim === true ? data.value.trim() : data.value;
else if (isLowerCase == undefined)
oData[data.name] = isTrim === true ? data.value.trim() : data.value;
});
return oData;
};
//使用方式是：
var oData = $("#zbqwzForm").serializeArray();
oData= mapToModel(oData,true);
var jsonStr = JSON.stringify(oData); //js物件轉成json物件二.span [data-name="brnl00"]時候
<form role="form" class="jgcx-main_form clearfix">
<div class="jgcx-main_form_row jgcx-main_form_row-sty1">
<label>姓名:</label><span data-name="brxm00"></span>
</div>
<div class="jgcx-main_form_row jgcx-main_form_row-sty2">
<label>條 形 碼:</label><span data-name="txm000"></span>
</div>
</form>
$(function () {
$.getJSON('js/jsonForm.txt',function(data){
console.log(data)
$(".jgcx-main_form").setForm(data);
});
})
$.fn.setForm = function(jsonValue){
var obj=this;
$.each(jsonValue, function (name, ival) {
obj.find("span[data-name=" + name + "]").text(ival);
});
}效果跟form一樣
三.table
(1).table 顯示json 資料
1.table
<table class="print-table print-table-A4">
<tr>
<th>編號</th>
<th>報告專案名稱</th>
<th>結果</th>
<th>提示(結果正常標誌)</th>
<th>單位</th>
<th>參考區間</th>
</tr>
</table>
2.json
[{
"id": "1",
"bgxmmc": "血壓測試1",
"jyjg00":"正常",
"jgzcbz":"正常",
"dw0000":"次",
"ckfw00":"10-23"
}, {
"id": "2",
"bgxmmc": "血壓測試2",
"jyjg00":"超出",
"jgzcbz":"低於參考值",
"dw0000":"次",
"ckfw00":"10-36"
}, {
"id": "3",
"bgxmmc": "血壓測試3",
"jyjg00":"低於",
"jgzcbz":"高於參考值",
"dw0000":"次",
"ckfw00":"10-23"
}]
3.js
$.ajax({
url: 'jsonTable.txt',
type: 'get',
dataType: 'json',
success: function(json) {
console.log('ll')
var item;
$.each(json, function(i, result) {
item = "<tr><td>" + result['id'] + "</td>"+
"<td>" + result['bgxmmc'] + "</td>"+
"<td>" + result['jyjg00'] + "</td>"+
"<td>"+ result['jgzcbz'] + "</td>"+
"<td>" + result['dw0000'] + "</td>"+
"<td>"+ result['ckfw00'] +"</td></tr>";
$('.print-table').append(item);
});
},
error:function(res){
console.log('失敗')
}
}) 
(2).table 提交資料
html
<table class="table tableList2-table table-new-xz" id="zzdJS">
<thead>
<tr>
<th width="5%">序號</th>
<th width="15%">主診斷編碼</th>
<th width="15%">主診斷名稱</th>
<th width="15%">主診斷匹配</th>
<th width="15%">從屬診斷碼</th>
<th width="15%">從屬診名稱</th>
<th width="15%">從屬診匹配</th>
<th width="5%">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span name="pxxh00">1</span></td>
<td data-id="zdbmjs" class="td_zdbm_1">
<input type="text" name="zdssbm" placeholder="輸入編碼" class="form-control" autocomplete="off" data-id="C69.503">
</td>
<td>
<input type="text" class="form-control" name="zdssmc" readonly="readonly">
</td>
<td data-id="csbmjs" class="td_csbm_1">
<input type="text" name="zdssbm2" placeholder="輸入從屬編碼" class="form-control" autocomplete="off" data-id="A19.800">
</td>
<td>
<input type="text" class="form-control" name="zdssmc2" readonly="readonly">
</td>
</tr>
<tr>
<td><span name="pxxh00">2</span></td>
<td data-id="zdbmjs" class="td_zdbm_2">
<input type="text" name="zdssbm" placeholder="輸入編碼" class="form-control" autocomplete="off" data-id="A19.901">
</td>
<td>
<input type="text" class="form-control" name="zdssmc" readonly="readonly">
</td>
<td data-id="csbmjs" class="td_csbm_2">
<input type="text" name="zdssbm2" placeholder="輸入從屬編碼" class="form-control" autocomplete="off" data-id="A19.803">
</td>
<td><input type="text" class="form-control" name="zdssmc2" readonly="readonly">
</td>
</tr>
</tbody>
</table>
js:
var zzdData =[];
var zzdObj = document.getElementById("zzdJS");
for(var i=1; i<zzdObj.rows.length; i++){
var jsonTr = {};
for(var j=1; j<zzdObj.rows[i].cells.length-1; j++){
//我寫的table中每一個td裡面都有一個input框，所以要先用children[0]獲取input框物件
name = zzdObj.rows[i].cells[j].children[0].name;
value = zzdObj.rows[i].cells[j].children[0].value;
jsonTr[name] = value;
}
zzdData.push(jsonTr);
}
console.log(zzdData)四.ul li
<ul id="list"></ul>
<script>
$(function() {
$.getJSON('table.json',function(data){
for(var i=0;i<data.length;i++){
$("#list").append('<li>'+data[i].name+'</a></li>');
}
});
})
</script>或是
<div class="newUl"></div>
<script>
$(function() {
$.getJSON('table.json',function(data){
var html='<ul id="list">'
for(var i=0;i<data.length;i++){
html+='<li>'+data[i].name+'</a></li>';
}
+'<ul>';
$('.newUl').append(html)
});
})
</script>