form表单交互/table/ul li

一.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"   或是改成<button  type="button" ></button>  

同时要注意input 时 在ios 上可能出现按钮颜色问题及点击问题 所以记得改成<button  type="button" ></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>