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

最新推荐文章于 2023-04-14 23:14:52 发布
最新推荐文章于 2023-04-14 23:14:52 发布
阅读量2.9w 收藏
点赞数
分类专栏： HTML+CSS+JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42483341/article/details/103393592
版权
目的

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

为了使用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表格展示

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

在这里插入图片描述

寒泉Hq
关注
专栏目录
Jinja2如何默认将None 值显示为空字符串？
weixin_33883178的博客
04-02 1891
在Jinja模板中 {% if User %} {{ User.name }} {% endif %} 可以简化为下面的写法，同时，保证返回值为空，而不是显示为“None” {{ User.name or '' }}  
js 数组过滤空值（undefined、null、""、0、false、NaN）
热门推荐
Martin 的博客
10-24 1万+
js 数组过滤空值（undefined、null、""、0、false、NaN） const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean); // arr => [1, 2]
js统一处理后端返回的null、undefined、空字符串
weixin_44441196的博客
10-26 1884
统一格式化后端返回的数据 该方法直接修改原数据 示例 // 格式化前 a:{ a1: undefined, a2: { b1: null }, a3: [{ c1: null }], a4: '' } // 格式化后 a:{ a1: '-', a2: { b1: '-' }, a3: [{ c1: '-' }], a4: '-' } /** *@params obj 要格式化的数组或者对象 type 将undefined、null、'' 要转化的内容 */ expo.
jinjia2 html建立表格样式
nongcunqq的博客
08-02 735
<table> <thead> <th>name</th> <th>author</th> <th>price</th> </thead> <tbody> {% for book in books %} <tr> <td>{{ book.name }}</td>
模板过滤器-Jinja2->控制语句
dremcl的博客
04-14 379
模板过滤器 过滤器是通过管道符号（|）进行使用的。例如： {{ name|length }}, 将返回name的长度，过滤器相当于是一个函数，把当前的变量出入到过滤器中，然后过滤器根据自己的功能，再返回响应的值，之后再将结果渲染到页面中，Jinja2中内置了许多的过滤器，再这里可以看到所有的过滤器： abs(value): 返回一个数值的绝对值 default(value,default_val...
python+jinja2实现接口数据批量生成工具
09-18
如果我们需要批量生成不同 `smid` 的请求数据，可以将 `smid` 字段改为 Jinja2 模板形式： ```json { "abc": "123", "p2p": "123", "smid": "{{ smid }}", "test": { "test1": "1", "test2": "2" }, "test3...
jinja2js:一个让你将 Jinja2 模板编译为 JavaScript 的项目
07-09
上面的命令将产生一个 JavaScript 函数，当使用包含对应于模板请求的值作为第一个参数的值的 JSON blob 执行时，将产生模板的呈现版本。 将--attributes标志添加到命令将返回模板期望在 JSON 中提供的值列表。 ...
flask+echarts+jinjia2考研数据可视化
06-26
这个项目的主要目的是通过爬虫获取数据，进行数据解析，然后使用Echarts库将数据以可视化的方式呈现出来，最终实现大屏展示的效果。以下将详细阐述这些关键知识点： 1. Flask：Flask是Python的一种轻量级Web应用...
monadical.com:自定义Flask + Jinja2静态网站生成器，为monadical.com提供内容
05-13
静态HTML是使用由Flask，Jinja2和wget支持的简短的自定义网站生成器生成的。 所有元数据都存储在content.json 。 模板位于： templates/ 静态文件位于： static/ 安装 apt install wget python3 # on Ubuntu/...
flask jinja 模板
日上フブキのブログ
07-24 243
jinja模板语法与dajngo模板语法相似，不过它更倾向于pthon的语法，没有特殊说明，则和django模板使用方法一只 一 for 循环 使用如{%forx in xx %} ... {{%else%}}...{%endfor%}语句来进行循环控制： range {% for i in range(5, 1, -1) %} {{ i }} {% end...
Flask中Jinja2模板过滤器
IT之一小佬的博客
08-14 646
Flask框架中Jinja2模板过滤器
【Javascript】【CSS】visibility:hidden和display:none区别
天天向上 Up Up Up (*^▽^*)
05-05 356
visibility:hidden只是将控件隐藏，但是仍然占据空间，留下一个空白区域 设置了visibility:hidden的元素虽然仍然占据空间，但是鼠标事件都会失效
js模板引擎_让 Flask 模板引擎 Jinja2 和 JavaScript 模板引擎和平共存
weixin_39738115的博客
11-30 267
Jinja2 有三种定界符语法：{{ ... }} 用来标记变量；{% ... %} 用来标记语句；{# ... #} 用来标记注释；如果你同时使用了 JavaScript 模板引擎，而该 JavaScript 模板引擎也使用相同的语法标记符，那就会产生冲突。一般来说，有下面三种兼容性处理方式：1. 使用 Jinja2 的 raw 标签标记 JavaScript 模板代码第一种方式最直观，使用 J...
python数据处理—None/NULL/NaN的理解及实际应用情况
sodaloveer的博客
03-31 9708
python数据处理—None/NULL/NaN的理解及实际应用情况
javascript学习笔记
liuqinhou的博客
04-14 210
本笔记来源于B站尚硅谷javascript教程。
【Pandas】Python中None、null和NaN
littlemichelle
03-28 6475
经常混淆。空值一般表示数据未知、不适用或将在以后添加数据。缺失值指数据集中某个或某些属性的值是不完整的。一般空值使用None表示，缺失值使用NaN表示。注意： python中没有null，但是有和其意义相近的None。
Jinjia2-语法入门
a4208xiaojin的博客
11-18 2765
Jinjia2 语法 控制结构 {% %} 变量取值 {{ }} 注释 {# #} 变量 读取变量 {{ parameter }} 读取字典 {{ parameter[‘key’] }} {{ parameter.key }} 读取数组 {{ parameter[3] }} 读取对象 {{ object.something() }} 过滤器 变量可以通过“过滤器”进行修改，过滤器可以理解为是Jinja2里面的内置函数和字符串处理函数。 常用过滤器如下： abs(value)：返回一个数值的绝对值。
Java-数据类型String与int相互转换，简单粗暴
qq_44936246的博客
03-26 852
一、 int 转String方法 直接就可以使用，将str改为需要转化的变量 1、Integer.parseInt(str) 2、Integer.valueOf(str).intValue() String a = "123"; int d = Integer.parseInt(a); int d_1 = Integer.valueOf(a).intValue(); //方法一、 int转化为String Integer.parseInt(a) System.out.println("a:"+d+"
jinja2.exceptions.UndefinedError: ‘None‘ has no attribute ‘id‘
weixin_37770279的博客
07-05 1074
前言： 　　最近在写一个仿知乎的，在线问答系统，用flask，在造数据，对接前端的时候，报了一个错，这个错很诡异…… pycharm控制台： 找到所在的视图函数，进行debug : 在前端js的逻辑里面，加入了判空处理： 还是会报错……分析： 1.创建一个有评论数据的文章，进入debug，是不会报错的 2.在进入没有评论数据的文章，会报错百思不得其解 …… 报错的问题是：在请求评论数据的异步接口中，需要一个问题的id（根据问题的id，获取到该问题下的第一条评论内容，作为默认加载项） 尝试过思路： 1.在
jinja2 字符串对齐
最新发布
08-11
回答: 在jinja2中，可以使用字符串对齐的功能来格式化输出。可以通过在格式化字符串中使用冒号和填充字符来实现对齐。例如，使用"<"表示左对齐，">"表示右对齐，"^"表示居中对齐。同时，可以指定字段的宽度以及填充字符。比如，假设有一个变量name="Alice"，可以使用以下方式进行字符串对齐： 左对齐: {{ name:<10 }} 输出："Alice " 右对齐: {{ name:>10 }} 输出：" Alice" 居中对齐: {{ name:^10 }} 输出：" Alice " 其中，数字10表示字段的宽度，可以根据需要进行调整。填充字符可以使用任意字符，比如可以使用空格或其他特定的字符。这样就可以实现字符串的对齐效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Python标准模块-string（格式化字符串与格式化字面量的区别）](https://blog.csdn.net/StarStudyStart/article/details/122136136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值