入门模版 table

最新推荐文章于 2024-05-24 14:31:13 发布

因为热爱本身，就是奖励

最新推荐文章于 2024-05-24 14:31:13 发布

阅读量245

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/u013943009/article/details/100116042

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

学习笔记

6 篇文章 0 订阅

订阅专栏

本文详细介绍了一款跌倒风险评估系统的实现方案，包括患者信息展示、风险因素评分、预防措施建议等功能。系统采用BootstrapTable组件展示数据，通过定义JS对象进行数据处理，实现了动态操作如编辑和删除。同时，文章还解释了如何在HTML中动态插入变量，以及使用join()方法进行数组拼接。

摘要由CSDN通过智能技术生成

<table id="riskdata_table" class="table-rythm table table-hover" align="center">
	<thead>
		<tr>
		    <th data-field="rythmOperate" rowspan="2" data-formatter="EmrRiskAssess.rythmOperate">操作</th>
			<th data-field="name" rowspan="2" data-valign="middle" data-align="center">患者姓名</th>	
			<th data-field="assessdate" rowspan="2" data-valign="middle" data-align="center">日期(年-月-日)</th>
			<th data-field="totalscore" rowspan="2" data-valign="middle" data-align="center">评分</th>
			<th data-align="center" colspan="7" style="text-align:center;">评分项目</th>
			<th data-align="center" colspan="3" style="text-align:center;">预防措施</th>
			<th data-field="nursename" rowspan="2" data-valign="middle" data-align="center">评估护士签名</th>
		</tr>
		<tr>
			<th data-field="fallen" data-align="center">跌倒史</th>
			<th data-field="old" data-align="center">年龄≧65岁</th>
			<th data-field="histroy" data-align="center">既往史</th>
			<th data-field="walking" data-align="center">步行需要帮助</th>
			<th data-field="treatment" data-align="center">接受药物治疗</th>
			<th data-field="movement" data-align="center">步态移动</th>
			<th data-field="cognitive" data-align="center">认知能力</th>
			<th data-field="risklevel0" data-align="center">一般预防措施</th>
			<th data-field="risklevel1" data-align="center">标准防止跌倒／坠床措施</th>
			<th data-field="risklevel2" data-align="center">高危险防止跌倒／坠床措施</th>
		</tr>
	</thead>
</table>

<script type="text/javascript">
    var riskAssessPatientId = Emr.patientId();
	var EmrRiskAssess = {};

EmrRiskAssess.createQueryParams = function(params) {
		params.patientid = riskAssessPatientId;
		return buildQueryParam('#riskAssess-search_form', params);
	}

	EmrRiskAssess.freshtable = function() {
		$('#riskdata_table').bootstrapTable('refresh');
	}

	$(function() {
		//表格初始化
		$("#rowspan").val(0);
		$('#riskdata_table').bootstrapTable({
			url : '@url("/emr/assessment/riskAssessSearch")',
			method : 'get',
			queryParams : EmrRiskAssess.createQueryParams,
			classes : 'table table-hover',
			pagination : true,
			columns : [ {
				align : 'center'
			} ]
		});
		
		$("#datedp").on("dp.change", function() {
			EmrRiskAssess.freshtable();
		});
	})

	
	 // 删除用户
	EmrRiskAssess.del = function(id) {
	    MsgBox.confirm("确定要删除吗?", function(isConfirm) {
	        if (isConfirm) {
	            var sConidtion = {
	                id : id
	            };
	            Ajax.ajax({
	                url : '@url("/emr/assessment/delete")',
	                data : sConidtion,
	                success : function(data) {
	                    if (data.successCount > 0) {
	                        MsgBox.success(data.retMsg,function(){
	                            EmrRiskAssess.freshtable();
	                             });
	                    } else {
	                        MsgBox.warning(data.retMsg);
	                    }
	                }
	            })
	        }
	    });
	}
	 
	// 编辑用户
	EmrRiskAssess.edit = function(id) {
	    top.Dialog.open('@url("/emr/assessment/editRiskAssess?patientId='+riskAssessPatientId+'")'+'&id='+id, {
            iframeHeight:650,
            title:'修改'
       },function(fnName, data) {
    	   EmrRiskAssess.freshtable();
       })
	} 
	
	EmrRiskAssess.search = function(id) {
		$('#riskAssess-search_form').bootstrapValidator('validate');
		var isValid = $('#riskAssess-search_form').data('bootstrapValidator').isValid();
		if (isValid) {
			$('#riskdata_table').bootstrapTable('refresh');
		}
	}

	EmrRiskAssess.doAdd = function() {
  		top.Dialog.open('@url("/emr/assessment/editRiskAssess?patientId='+riskAssessPatientId+'")', {
            iframeHeight:650,
            title:'跌倒/坠床危险因素评估'
       },function(fnName, data) {
    	   EmrRiskAssess.freshtable();
       })
	}
	
	EmrRiskAssess.rythmOperate = function(value,row){
	    var html = [];
	    html.push('<a class="iconlink-rythm fa fa-pencil glyphicon" onclick="EmrRiskAssess.edit(\''+row.id+'\')"></a>');
	    html.push('<a class="iconlink-rythm fa fa-times glyphicon" onclick="EmrRiskAssess.del(\''+row.id+'\')"></a>');
	    return html.join("");
	}


<script>

此处有四个功能点:

一个是在原生table中加操作【编辑】【删除】操作

一个是定义js中定义对象

标签中定义动态的变量

数组的拼接 join()方法

绑定点击事件

1.定义table的操作

<th data-field="rythmOperate" rowspan="2" data-formatter="EmrRiskAssess.rythmOperate">操作</th>

data-field="rythmOperate" 参数名字

field
Attribute: data-field

Type: String

Detail:

The column field name.

Default: undefined

Example: Column Field

rowspan="2" 所占列数

EmrRiskAssess.rythmOperate = function(value,row){
	    var html = [];
	    html.push('<a class="iconlink-rythm fa fa-pencil glyphicon" onclick="EmrRiskAssess.edit(\''+row.id+'\')"></a>');
	    html.push('<a class="iconlink-rythm fa fa-times glyphicon" onclick="EmrRiskAssess.del(\''+row.id+'\')"></a>');
	    return html.join("");
	}

data-formatter="EmrRiskAssess.rythmOperate" 方法

formatter
Attribute: data-formatter

Type: Function

Detail:

The context (this) is the column Object.

The cell formatter function, take three parameters:

value: the field value.
row: the row record data.
index: the row index.
field: the row field.
Default: undefined

2.定义js中定义对象(好出就在是一个复杂的多层次嵌套页面,不会造成方法名相同而调用混乱,因为给一个我都会用一个对象去对应)

var EmrRiskAssess = {};
//对象的 方法
EmrRiskAssess.edit();
EmrRiskAssess.createQueryParams(params);
EmrRiskAssess.freshtable();
EmrRiskAssess.del(id);
EmrRiskAssess.search(id);
EmrRiskAssess.doAdd();
EmrRiskAssess.rythmOperate(value,row);

3.标签中定义动态的变量(在字符串中定义拼接一个变量)

从图中可以看出 :

edit()方法中参数id是字符串类型

del()方法中参数id不是字符串类型

在调方法的时候需要一个字符串del()方法就会报错;

//这个拼接出来的 row.id是一个字符串
'<a class="iconlink-rythm fa fa-pencil glyphicon" onclick="EmrRiskAssess.edit(\''+row.id+'\')"></a>')

//这个拼接出来的 row.id不是一个字符串
'<a class="iconlink-rythm fa fa-pencil glyphicon" onclick="EmrRiskAssess.edit('+row.id+')"></a>')

var html = [];
	    html.push('<a class="iconlink-rythm fa fa-pencil glyphicon" onclick="EmrRiskAssess.edit(\''+row.id+'\')"></a>');
	    html.push('<a class="iconlink-rythm fa fa-times glyphicon" onclick="EmrRiskAssess.del(\''+row.id+'\')"></a>');
html.join("");

4.join方法

html.join("") 分割的时候中间没有符号;

定义和用法

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

语法

arrayObject.join(separator)

参数	描述
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

4.绑定点击事件

$(#id).on("click").on("click",function(){

});

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

语法

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。