EasyUi js 加载数据表格DataGrid

简介: EasyUi js 加载数据表格DataGrid

jsp页面代码:


<div data-options="region:'center',split:true,title:''">

       <table id="dataGrid"></table>

</div>


注意:自己在官网下载easyui的js和css样式包然后页面引用。


jjs加载:

<script type="text/javascript">
  var dataGrid;
  var orders = '${USER_SESSION.funIds}';
  $(function() {
    
    dataGrid = $('#dataGrid').datagrid({
      loadMsg: '数据加载中....',
      url: '${pageContext.request.contextPath}/sdCstmInfoController.do?cstmGrid2',
      fit: true,
      fitColumns: true,
      border: false,
      pagination: true,
      idField: 'id',
      pageSize: 10,
      pageList: [10, 20, 50, 100, 200],
      sortName: 'id',
      sortOrder: 'desc',
      nowrap: false,
      rownumbers: true,
      border: true,
      striped: true,
      singleSelect: true,
      checkOnSelect: false,
      selectOnCheck: false,
      frozenColumns: [[{
        field: 'id',
        title: '编号',
        width: 150,
        checkbox: true
      }, {
        field: 'customName',
        title: '姓名',
        width: 100,
        sortable: true,
        formatter: function(value, row) {
           return "<strong><a style='color:#1E90FF;font-weight:bold' href='#' onclick='doSomething("+row.id+")'>"+value+"</a></strong>";                
        }
      },{
        field: 'sex',
        title: '性别',
        width: 50,
        sortable: true,
        formatter: function(value, row) {
          if ("1" == value) return "<strong style='color:blue'>男<strong>";
          else if ("2" == value) return "<strong style='color:green'>女<strong>";
        }
      }, {
        field: 'mingZu',
        title: '民族',
        width: 60,
        sortable: true
      },  
      {
        field: 'politicalType',
        title: '政治面貌',
        width: 60,
        sortable: true,
        formatter: function(value, row) {
          if(value == 1) return "<strong >中共党员</strong>";
          else if(value ==2) return "<strong >中共预备党员</strong>";
          else if(value ==3) return "<strong >共青团员</strong>"; 
          else if(value ==4) return "<strong >民革党员</strong>"; 
          else if(value ==5) return "<strong >民盟盟员</strong>"; 
          else if(value ==6) return "<strong >民建会员</strong>"; 
          else if(value ==7) return "<strong >民进会员</strong>"; 
          else if(value ==8) return "<strong >农工党党员</strong>";  
          else if(value ==9) return "<strong >致公党党员</strong>";  
          else if(value ==10) return "<strong >九三学社社员</strong>";  
          else if(value ==11) return "<strong >台盟盟员</strong>";  
          else if(value ==12) return "<strong >无党派人士</strong>"; 
          else if(value ==13) return "<strong >群众</strong>";
        }
        
      },
      {
        field: 'joinPartyDate',
        title: '入党时间',
        width: 80,
        sortable: true
      },
      {
        field: 'partyDuties',
        title: '党内职务',
        width: 60,
        sortable: true
      },
      {
        field: 'suoZaiDanZhiBuName',
        title: '所在党支部',
        width: 100,
        sortable: true
      },
      {
        field: 'idCard',
        title: '身份证',
        width: 120,
        sortable: true
      }, 
      {
        field: 'customTel',
        title: '联系电话',
        width: 80,
        sortable: true
      }, {
        field: 'cadreState',
        title: '离退休状态',
        width: 70,
        sortable: true,
        formatter: function(value, row) {
          if(value == 1) return "<strong style='color:#EA7500'>离休</strong>";
          else if(value ==2) return "<strong style='color:blue'>退休</strong>";         
        }
      },{
        field: 'retirementDate',
        title: '离退休时间',
        width: 70,
        sortable: true        
      }]],
      columns: [[{
        field: 'auditState',
        title: '审核状态',
        width: 90,
        sortable: true,
        formatter: function(value, row) {
          if ("1" == value) return "<strong style='color:blue'>未审核<strong>";
          else if ("2" == value) return "<strong style='color:green'>审核通过<strong>";
          else if ("3" == value) return "<strong style='color:red'>审核未通过<strong>";
        }
      }, {
        field: 'jianKangZhuangK',
        title: '健康状况',
        width: 90,
        sortable: true
      }, {
        field: 'yangLaoFangShi',
        title: '养老方式',
        width: 130,
        sortable: true
      }]],
      toolbar: '#toolbar',
      onLoadSuccess: function() {
        $(".edit_button").linkbutton({
          text: '审核',
          plain: true,
          iconCls: 'icon-audit16'
        });
        doCellTips(true);
      },
      onRowContextMenu: function(e, rowIndex, rowData) {
        e.preventDefault();
        $(this).datagrid('unselectAll').datagrid('uncheckAll');
        $(this).datagrid('selectRow', rowIndex);
        $('#menu_tools').menu('show', {
          left: e.pageX,
          top: e.pageY
        });
      }
    });
  });

页面展示:

相关文章
|
1月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
|
2月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
50 0
|
10天前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
25 7
|
9天前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
33 4
|
1月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
74 11
|
15天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
17 0
|
18天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
29天前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
2月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
60 0
|
2月前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
65 0