1.列表界面

2.流程状态的效果

 <t:dgCol title="流程状态"  field="bpmStatus"  queryMode="single"  dictionary="decstate"  extendParams="styler:fmtype"  width="120"></t:dgCol>
function fmtype(val,row,index){
//可添加更多CSS样式
var s1 = 'background-color: #00CC00;color:black';
var s2 = 'background-color:orange;color:black';
if (val =='3') {
return s1
}
if (val =='1') {
return s2
} }

3.张三李四的效果

<t:datagrid name="decMainList" checkbox="true" fitColumns="true" title="报关单" sortName="createDate"  rowStyler="fun"
actionUrl="decMainController.do?datagrid" idField="id" fit="true" queryMode="group">
 $(document).ready(function(){

     $('.datagrid-toolbar').children("span").append("<label style='background-color:#E0FFFF;color:#E0FFFF'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>  张三 ");
$('.datagrid-toolbar').children("span").append("<label style='background-color:#FFF8DC;color:#FFF8DC'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label> 李四 ");
});
function fun( index, row){
var s3 = 'background-color:#FFF8DC;color:black';
var s5 = 'background-color:#E0FFFF;color:black'; if(row.createName == '张三'){
return s5
}
if(row.createName == '李四'){
return s3
} }  

4.是否审核

 <t:dgCol title="是否审核"  field="ischeck"  queryMode="single"  formatterjs="ischeck"   width="120"></t:dgCol>
function ischeck(value, row, index){
if (row.bpmStatus== '3' ) { return '<span style="color:green;font-size: 16px;">✔</span>';
} else{ return '<span style="color:red;font-size: 16px;">x</span>';
}
}

5.业务编号链接js

<t:dgCol title="业务编号"  field="clientNo"  formatterjs="clientNojs"   query="true"  queryMode="single"  width="120"></t:dgCol>
function clientNojs(value, row, index) {
return "<a href='#' style='color:#00BB00' onclick='goclient(" + index+ ")'>" + value+ "</a>";
} function goclient(index) {
$("#decMainList").datagrid('selectRow', index);
var row = $('#decMainList').datagrid('getSelected');
if(row.ieFlag=='I'){
var url = 'decMainController.do?goUpdate&id=' + row.id ;
}else{
var url = 'decMainController.do?goUpdate&id=' + row.id ;
}
createwindow('查看', url, '100%', '100%');
}

6.报关单号查询字段扩大

 <t:dgCol title="报关单号"  field="entryId"  query="true" extend="{style:'width:170px'}" queryMode="single"  width="120"></t:dgCol>

7.审核是否展示

 <t:dgFunOpt exp="bpmStatus#ne#3" title="审核" funname="check(id)" urlclass="ace_button"  urlfont="fa-check" />

8.拓展字段与合计

    List<JeecgDemoEntity> list = dataGrid.getResults();
Map<String,Map<String,Object>> extMap = new HashMap<String, Map<String,Object>>();
for(JeecgDemoEntity temp:list){
//此为针对原来的行数据,拓展的新字段
Map m = new HashMap();
m.put("extField",this.jeecgMinidaoDao.getOrgCode(temp.getDepId()));
extMap.put(temp.getId(), m);
}
// dataGrid.setFooter("salary,age,name:合计");//默认合计
dataGrid.setFooter("[{'salary':'','age':'','name':'合计'}]");//自定义合计
TagUtil.datagrid(response, dataGrid, extMap);

9.手机号项合并功能js

   $('#decMainList').datagrid({
onLoadSuccess: function (data) {
$('#decMainList').datagrid('clearSelections');//这里涉及到简单的运算,mark是计算每次需要合并的格子数
var mark=1;
for (var i=1; i <data.rows.length; i++) { //这里循环表格当前的数据
if (data.rows[i]['phone'] == data.rows[i-1]['phone'] && data.rows[i]['phone']!=''&& data.rows[i-1]['phone'] !='') {
mark += 1;
$(this).datagrid('mergeCells',{
index: i+1-mark,
field: 'phone',
rowspan:mark
      }
                           );
   }else{
mark=1;
}
}
}
})

用jeecg做个项目第二讲(Datagrid数据列表效果详解)的更多相关文章

  1. “全栈2019”Java第二十九章:数组详解(中篇)

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解

    前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY  <源路径> .. ...

  3. (转) SpringBoot非官方教程 | 第二篇:Spring Boot配置文件详解

    springboot采纳了建立生产就绪spring应用程序的观点. Spring Boot优先于配置的惯例,旨在让您尽快启动和运行.在一般情况下,我们不需要做太多的配置就能够让spring boot正 ...

  4. SpringBoot非官方教程 | 第二篇:Spring Boot配置文件详解

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot2-config-file/ 本文出自方志朋的博客 ...

  5. Git学习系列之如何正确且高效地将本地项目上传到Github(图文详解)

    不多说,直接上干货! 首先你需要一个Github账号,所以还没有的话先去注册吧! https://github.com/ 见 如何走上更高平台分享传递干货知识:(开通个人Github面向开源及私有软件 ...

  6. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  7. nginx通过域名访问项目(不接项目名称),cookie丢失问题详解

    最近搞了个域名,想用它直接去访问Tomcat上部署的项目,开始一直必须加上项目名称,经过短暂配置,成功了. 访问一次,到达登陆页面,结果死活登录不进去,一直在登陆界面,原来是由于cookie丢失,现配 ...

  8. 使用IDEA创建Maven项目和Maven使用入门(配图详解)

    本文详解的讲解了使用IDEA创建Maven项目,及Maven的基础入门. 1.打开IDEA,右上角选择File->New->Project 2.如图中所示选择Maven(可按自己所需添加, ...

  9. tp6源码解析-第二天,ThinkPHP6编译模板流程详解,ThinkPHP6模板源码详解

    TP6源码解析,ThinkPHP6模板编译流程详解 前言:刚开始写博客.如果觉得本篇文章对您有所帮助.点个赞再走也不迟 模板编译流程,大概是: 先获取到View类实例(依赖注入也好,通过助手函数也好) ...

随机推荐

  1. 程序员与数据库打交道的JDBC知识概要

    1.JDBC全称:Java database connectivity,Java数据库连接. (1)           JDBC是一种用于执行SQL语句的Java API,为多种关系数据库提供多种统 ...

  2. 在windows环境中单机搭建rabbitmq集群

    建议单机版集群仅作为学习使用,生产环境最好使用多服务器集群来避免单点故障带来的服务不可用,必竟单机版的集是伪集群. 1:准备基础文件.环境变量 设置环境变量: 变量名:RABBITMQ_BASE 变量 ...

  3. Kafka的性能分析

    都说Kafka的吞吐量很大,但是我一直不直到Kafka为何有如此大的吞吐量.最近在看Kafka权威指南,陆陆续续得到了如下结论: 1.分区:Kafka支持分区,这样就支持多个生产者和多个消费者同时请求 ...

  4. docker alpine wkhtmltopdf

    截止2019.08 wkhtmltopdf 还没有 alpine 的版本  如需使用  需要在 alpine 环境中编译 生成 wkhtmltopdf  (使用 apk add wkhtmltopdf ...

  5. python 制作影视动画、电影特效工具

    一直觉得电影特效,动画制作这些都很什么,在google上搜索了下python开发电影特效的内容,发现了几个不错的软件,都支持python脚本开发. Houdini  Houdini (电影特效魔术师) ...

  6. c# String 常用方法应用

  7. 跟着minium官网介绍学习minium-----(一)

    某天,再打开微信开发者工具的时候收到一条推送.说是微信小程序自动化框架 Python 版 -- Minium 公测. Url如下: https://developers.weixin.qq.com/c ...

  8. Python使用selenium模拟点击(一)

    本文适合有点Python基础阅读,(没基础的话,相对的比较蒙蔽,争取能让小白能一步一步跟上来) 2019-03-05 14:53:05 前几天由于需要到一个网站进行签到~~听说Python能够模拟请求 ...

  9. Kostya the Sculptor(贪心

    这题本来  想二分.想了很久很久,解决不了排序和二分的冲突.     用贪心吧.. 题意: 给你n个长方形,让你找出2个或1个长方体,使得他们拼接成的长方体的内接球半径最大(这是要求最短边越大越好)( ...

  10. 【好好补题,因为没准题目还会再出第三遍!!】ACM字符串-组合数学(官方题解是数位DP来写)

    ACM字符串 .长度不能超过n .字符串中仅包含大写字母 .生成的字符串必须包含字符串“ACM”,ACM字符串要求连在一块! ok,是不是很简单?现在告诉你n的值,你来告诉我这样的字符串有多少个 输入 ...