【JavaScript+JinJa2】表格中将后台传入的None值显示为空字符串，将数据显示为int类型值

目的

需要将数据库中取出的值进行前台展示。

为了使用easyui拓展中的排序功能，需要把表格中的值显示为int类型，但是如果是空字符串的话，转换为int会报错。如果全部转换为str的话，排序会出问题（会按照字符排序而非数值大小）

解决方式：进行一下逻辑判断。如果是None，则转换为空字符串''，如果有值，则取其值（使用JinJa模板的{{ param }}获取后端传来的值）。

部分js代码示例

<script>$(document).ready(function() {var zNodes = [];var i=0;{% for node in result %}i++;var obj = new Object();obj.id = i;obj.p_code ='{{ node.p_code }}';obj.jan_mar_5_max ='{{ node.jan_mar_5_max }}'=='None'?'':{{ node.jan_mar_5_max }}; // 如果有值,填入int型值;如果无值,填入空字符串obj.jan_mar_5_min ='{{ node.jan_mar_5_min }}'=='None'?'':{{ node.jan_mar_5_min }};obj.mar_sep_5_max ='{{ node.mar_sep_5_max }}'=='None'?'':{{ node.mar_sep_5_max }};obj.mar_sep_5_min ='{{ node.mar_sep_5_min }}'=='None'?'':{{ node.mar_sep_5_min }};obj.jan_sep_5_max ='{{ node.jan_sep_5_max }}'=='None'?'':{{ node.jan_sep_5_max }};obj.jan_sep_5_min ='{{ node.jan_sep_5_min }}'=='None'?'':{{ node.jan_sep_5_min }};obj.mar_jan_5_max ='{{ node.mar_jan_5_max }}'=='None'?'':{{ node.mar_jan_5_max }};obj.mar_jan_5_min ='{{ node.mar_jan_5_min }}'=='None'?'':{{ node.mar_jan_5_min }};obj.sep_jan_5_max ='{{ node.sep_jan_5_max }}'=='None'?'':{{ node.sep_jan_5_max }};obj.sep_jan_5_min ='{{ node.sep_jan_5_min }}'=='None'?'':{{ node.sep_jan_5_min }};obj.sep_mar_5_max ='{{ node.sep_mar_5_max }}'=='None'?'':{{ node.sep_mar_5_max }};obj.sep_mar_5_min ='{{ node.sep_mar_5_min }}'=='None'?'':{{ node.sep_mar_5_min }};obj.jan_mar_his_max ='{{ node.jan_mar_his_max }}'=='None'?'':{{ node.jan_mar_his_max }};obj.jan_mar_his_min ='{{ node.jan_mar_his_min }}'=='None'?'':{{ node.jan_mar_his_min }};obj.mar_sep_his_max ='{{ node.mar_sep_his_max }}'=='None'?'':{{ node.mar_sep_his_max }};obj.mar_sep_his_min ='{{ node.mar_sep_his_min }}'=='None'?'':{{ node.mar_sep_his_min }};obj.jan_sep_his_max ='{{ node.jan_sep_his_max }}'=='None'?'':{{ node.jan_sep_his_max }};obj.jan_sep_his_min ='{{ node.jan_sep_his_min }}'=='None'?'':{{ node.jan_sep_his_min }};obj.mar_jan_his_max ='{{ node.mar_jan_his_max }}'=='None'?'':{{ node.mar_jan_his_max }};obj.mar_jan_his_min ='{{ node.mar_jan_his_min }}'=='None'?'':{{ node.mar_jan_his_min }};obj.sep_jan_his_max ='{{ node.sep_jan_his_max }}'=='None'?'':{{ node.sep_jan_his_max }};obj.sep_jan_his_min ='{{ node.sep_jan_his_min }}'=='None'?'':{{ node.sep_jan_his_min }};obj.sep_mar_his_max ='{{ node.sep_mar_his_max }}'=='None'?'':{{ node.sep_mar_his_max }};obj.sep_mar_his_min ='{{ node.sep_mar_his_min }}'=='None'?'':{{ node.sep_mar_his_min }};obj.cur_jan_mar ='{{ node.cur_jan_mar }}'=='None'?'':{{ node.cur_jan_mar }};obj.cur_mar_sep ='{{ node.cur_mar_sep }}'=='None'?'':{{ node.cur_mar_sep }};obj.cur_jan_sep ='{{ node.cur_jan_sep }}'=='None'?'':{{ node.cur_jan_sep }};obj.cur_mar_jan ='{{ node.cur_mar_jan }}'=='None'?'':{{ node.cur_mar_jan }};obj.cur_sep_jan ='{{ node.cur_sep_jan }}'=='None'?'':{{ node.cur_sep_jan }};obj.cur_sep_mar ='{{ node.cur_sep_mar }}'=='None'?'':{{ node.cur_sep_mar }};var jan_mar_5_space = (100*(obj.cur_jan_mar-obj.jan_mar_5_min)/(obj.jan_mar_5_max-obj.jan_mar_5_min)).toFixed(0);obj.jan_mar_5_space = isNaN(jan_mar_5_space)?'':jan_mar_5_space;var mar_sep_5_space = (100*(obj.cur_mar_sep-obj.mar_sep_5_min)/(obj.mar_sep_5_max-obj.mar_sep_5_min)).toFixed(0);obj.mar_sep_5_space = isNaN(mar_sep_5_space)?'':mar_sep_5_space;var jan_sep_5_space = (100*(obj.cur_jan_sep-obj.jan_sep_5_min)/(obj.jan_sep_5_max-obj.jan_sep_5_min)).toFixed(0);obj.jan_sep_5_space = isNaN(jan_sep_5_space)?'':jan_sep_5_space;var mar_jan_5_space = (100*(obj.cur_mar_jan-obj.mar_jan_5_min)/(obj.mar_jan_5_max-obj.mar_jan_5_min)).toFixed(0);obj.mar_jan_5_space = isNaN(mar_jan_5_space)?'':mar_jan_5_space;var sep_jan_5_space = (100*(obj.cur_sep_jan-obj.sep_jan_5_min)/(obj.sep_jan_5_max-obj.sep_jan_5_min)).toFixed(0);obj.sep_jan_5_space = isNaN(sep_jan_5_space)?'':sep_jan_5_space;var sep_mar_5_space = (100*(obj.cur_sep_mar-obj.sep_mar_5_min)/(obj.sep_mar_5_max-obj.sep_mar_5_min)).toFixed(0);obj.sep_mar_5_space = isNaN(sep_mar_5_space)?'':sep_mar_5_space;var jan_mar_his_space = (100*(obj.cur_jan_mar-obj.jan_mar_his_min)/(obj.jan_mar_his_max-obj.jan_mar_his_min)).toFixed(0);obj.jan_mar_his_space = isNaN(jan_mar_his_space)?'':jan_mar_his_space;var mar_sep_his_space = (100*(obj.cur_mar_sep-obj.mar_sep_his_min)/(obj.mar_sep_his_max-obj.mar_sep_his_min)).toFixed(0);obj.mar_sep_his_space = isNaN(mar_sep_his_space)?'':mar_sep_his_space;var jan_sep_his_space = (100*(obj.cur_jan_sep-obj.jan_sep_his_min)/(obj.jan_sep_his_max-obj.jan_sep_his_min)).toFixed(0);obj.jan_sep_his_space = isNaN(jan_sep_his_space)?'':jan_sep_his_space;var mar_jan_his_space = (100*(obj.cur_mar_jan-obj.mar_jan_his_min)/(obj.mar_jan_his_max-obj.mar_jan_his_min)).toFixed(0);obj.mar_jan_his_space = isNaN(mar_jan_his_space)?'':mar_jan_his_space;var sep_jan_his_space = (100*(obj.cur_sep_jan-obj.sep_jan_his_min)/(obj.sep_jan_his_max-obj.sep_jan_his_min)).toFixed(0);obj.sep_jan_his_space = isNaN(sep_jan_his_space)?'':sep_jan_his_space;var sep_mar_his_space = (100*(obj.cur_sep_mar-obj.sep_mar_his_min)/(obj.sep_mar_his_max-obj.sep_mar_his_min)).toFixed(0);obj.sep_mar_his_space = isNaN(sep_mar_his_space)?'':sep_mar_his_space;obj.upstream_date = '{{ node.upstream_date }}';zNodes.push(obj);{% endfor %}function resolve() {console.log(zNodes);return zNodes;}$('#dg').datagrid({filterBtnIconCls:'icon-filter',data:resolve(),striped: true //隔行变色});})</script>

easyui表格展示

可以看到空值（空字符串）也参与了排序。

【JavaScript+JinJa2】表格中将后台传入的None值显示为空字符串，将数据显示为int类型值相关推荐

Javascript 中的false、0、null、undefined和空字符串对象
typeof类型检测我们下来看看他们的类型分别是什么: alert(typeof(false) === 'boolean');//truealert(typeof(0) === 'number'); ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)...
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...
JSP中枚举的遍历和Jquery填充后台传入数据
本菜鸟是新的不能再新的菜鸟了,菜鸟作为实习生进来一家公司上班,两眼一抹黑,只是把自己学到的觉得有用的写下来. 项目背景:Spring+Spring mvc+MyBatis JSP中将枚举遍历显示 1. ...
vue中将后台返回的0，1等代码转换成男，女等汉字。
vue中将后台返回的0,1等代码转换成男,女等汉字. 一.table表格中只有一项或者两项时候在table项中 ,可以使用多项的方法,也可以使用作用域插槽使用二.table表格外部的 ...
html5怎么给表格设置分页,如何让HTML5的表格支持后台排序与分页
如何让HTML5的表格支持后台排序与分页 TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能.表格 ...
javascript编辑表格
1.说明文档下载文档 2.源代码 function New(aClass, aParams) //通用创建函数 { var empty = {}; jQuery.extend ...
layui 读取本地excel内容_layui之数据表格--与后台交互获取数据的方法
jsp或html js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action ...
JavaScript 动态表格操作
阅读目录 JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法 1.1 Table 对象集合 1.2 Table 对象方法 1.3 Table 对象常用属性 1. ...

【JavaScript+JinJa2】表格中将后台传入的None值显示为空字符串，将数据显示为int类型值

目的

部分js代码示例

easyui表格展示

【JavaScript+JinJa2】表格中将后台传入的None值显示为空字符串，将数据显示为int类型值相关推荐

最新文章

热门文章