easy-ui的datagrid
<div id="magazineGrid"></div>
<script>
$('#magazineGrid').datagrid({
height: 340,
//在创建完成后会根据url请求数据,通过ajax完成
url: '<c:url value="/kpOutSystem/view.do?op=getList"/>',
method: 'POST',
queryParams: { 'id': id },
idField: '产品ID', //该列为唯一列
striped: true, //交替显示行背景
fitColumns: true, //自动使列适应表格宽度以防水平滚动
singleSelect: false, //只允许选择一行
rownumbers: true, //显示行号
nowrap: false, //当数据长度超出列宽时会自动截取
pagination: false,//是否分页
pageNumber:50, //设置分页时,初始化分页码
pageSize: 10, //设置分页时,初始化每页记录数
pageList: [10, 20, 50, 100, 150], //设置分页时,初始化每页记录数列表
showFooter: true, //是否显示表底(可以显示总计)
//多表头
columns: [[
{ title: '',colspan:3 },
{ title: '',colspan:3},
],[
{ field: 'ck', checkbox: true },//添加了checkbox列,自适应宽度
{ field: '刊名', title: '刊名', width: 180, align: 'left' },
{ field: '类别', title: '类别', width: 150, align: 'left' },
{ field: '月份', title: '月份', width: 100, align: 'left' },
{ field: '价格', title: '价格', width: 100, align: 'right',hidden:true, },//隐藏
{ field: '数量', title: '数量', width: 80, align: 'left',
editor: {//行编辑的功能
type: 'numberbox',
options: {//对应具体配置
min: 0,
precision: 0
}
}
}
]], onBeforeLoad: function (param) {//ajax请求添加查询条件
var bId = $("#txtBId").val();
var AllSearchKey = $("#txtAllSearchKey").val();
param.bId = bId;
param.AllSearchKey = AllSearchKey;
}, onLoadSuccess: function (data) {
}, onLoadError: function () {
}, onClickCell: function (rowIndex, field, value) {
}
});
</script>
------
<table id="dataTable"></table> <script>
var rowData = $('#dataTable').datagrid('getSelected');//获取所选行 function makeDataGrid(){
var sbstr = "";
$('#dataTable').datagrid({
nowrap: true,
striped: true,
url:'<c:url value="/groupInvoice/view.do?op=getInvoiceList"/>',
//在创建完成后会根据url请求数据,通过ajax完成
pageSize:20,
pageNumber:1,
pageList:[10,20,50],
remoteSort:false,
columns:[[
{field:'payBillID',title:'支付号',sortable:true,checkbox:true},
{field:'errorMsg',title:'错误信息 ',sortable:true,
formatter:function(value,row,index){
if(value !=null){
return "<font color='red'>"+value+"</font>";
}
}
},
{field:'payId',title:'payId',sortable:true,hidden:true},
{field:'adminName',title:'学员代码',sortable:true},
{field:'idCard',title:'身份证号',sortable:true},
{field:'outSystemSign',title:'外系统编码 ',sortable:true},
{field:'payMoney',title:'支付金额 ',sortable:true},
{field:'payTime',title:'支付时间 ',sortable:true,
formatter:function(value,row,index){
if(value !=null){
var result =genStrDateTimeAll(value);
return result;
}
}
},
{field:'bankReturnTime',title:'返回时间',sortable:true,
formatter:function(value,row,index){
if(value != null){
var result = genStrDateTimeAll(value);
return result;
}
}
},
{field:'invoiceStatus',title:'发票状态',sortable:true,
formatter:function(value,row,index){
var payBillID = row.payBillID;
var payMoney = row.payMoney;
var adminName = row.adminName;
var parm = "";
parm += "&payBillID="+payBillID;
parm += "&payMoney="+payMoney;
parm += "&adminName="+adminName;
if(value == 0 || value == 9){
return "新申请";
}else{
return "未申请";
}
}
},
]], queryParams: {
payTimeStart: '${payTimeStart}' ,
payTimeEnd: '${payTimeEnd}',
outSystemSign: '${outSystemSign}',
groupID:'${groupID}'
},
pagination:true,
rownumbers:true,
onLoadSuccess:clearSelections /* 动态控制复选框
onLoadSuccess: function(data){
if (data.rows.length > 0) {
//循环判断操作为新增的不能选择
for (var i = 0; i < data.rows.length; i++) {
//根据operate让某些行不可选
if (data.rows[i].invoiceStatus == 8|| data.rows[i].invoiceStatus == 13||data.rows[i].invoiceStatus == 14 ) {
$("input[type='checkbox']")[i + 1].disabled = true;
}
}
}
}, onClickRow: function(rowIndex, rowData){
//加载完毕后获取所有的checkbox遍历
$("input[type='checkbox']").each(function(index, el){
//如果当前的复选框不可选,则不让其选中
if (el.disabled == true) {
$('#dataTable').datagrid('unselectRow', index - 1);
}
})
}*/
});
}
</script>
easy-ui的datagrid的更多相关文章
- 让Easy UI 的DataGrid直接内嵌的JSON对象,并重写form load 方法
前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...
- easy ui datagrid 让某行复选框不能选中
//百度查找出来的 onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历 if (data.rows.length > ...
- easy ui datagrid 增,删,改,查等基本操作
如下图: ①列表信息图 ②添加信息图 ③修改信息图 html代码: <%@ Page Title="" Language="C#" MasterPageF ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- Jquery Easy UI Datagrid 上下移动批量保存数据
DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...
- Easy UI form表单提交 IE浏览器不执行success ,以及 datagrid 展示过慢
最近在做一个Easy ui的项目 发现了一些问题,在这里总结下 1.表单提交,后端代码 public ActionResult Save(Request model) { ResultInfo _in ...
- Struts2 easy UI插件
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
- Easy UI常用插件使用
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
- easy ui插件
简介: easy UI是类似于jQuery UI的插件库 注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...
- easy ui 1.4的NumberBox,失去焦点后不能再次输入小数点
这也是1.4版本的bug,现在1.4.1也发布了,经验证,该问题在新版本中已经解决了 在网上找到的解决办法,地址:http://www.jeasyui.com/forum/index.php?topi ...
随机推荐
- Eureka Server启动过程分析
1.首先,SpringCloud充分利用了SpringBoot的自动装配特点 eureka-server的jar包,发现在META-INF下面的配置文件spring.factories,里面记录了Sp ...
- k8s之DNS服务器搭建
一.导读 在使用k8s部署springboot+redis简单应用这篇文章中,spring boot连接redis是直接使用的IP连接,那么可不可以直接使用服务名称进行连接呢?答案是可以的,这就是k8 ...
- win8.1下jdk的安装和环境变量的配置 eclipse的安装和汉化
1.首先下载jdk安装包,安装的时候会有两个文件安装,一个是jdk一个是jre建议两个文件不要安装在一个目录下 2.安装jdk后面就是配置环境变量,path和classpath,path要在用户变量中 ...
- U盘容量变小处理
参考: https://blog.csdn.net/weixin_39792252/article/details/80676300?utm_medium=distribute.pc_relevant ...
- Win Task 任务管理器 批量杀进程方法
Example Kill All Chrome & Chrome Driver taskkill /IM chromedriver.exe /F taskkill /IM chrome.exe ...
- KDiff3 Merge工具的使用 极简教程
www.swack.cn - 原文链接:KDiff3 Merge工具 1.软件安装 下载链接:KDiff3-64bit-Setup_0.9.98-2.exe 安装KDiff3 git config - ...
- 《犬夜叉2021》我想通过Binder找到你
前言 本故事纯属虚构,如有不通顺的逻辑请轻喷.️ <犬夜叉2021> 第一章:我还能找到你吗,阿篱 犬夜叉和奈落大决战之后,四魂之玉.食骨之井消失,谁也不知道去了哪,而犬夜叉和阿篱再次被分 ...
- LeetCode876 链表的中间结点
给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3,4,5] 输出:此列表中的结点 3 (序列化形式:[3,4 ...
- version can neither be null, empty nor blank
在用mybatis-generator逆向生成mapper和DAO的时候,出现了这个错误. mybatis-generator:generate 原因是在pom.xml中我的mysql依赖没有写版本号 ...
- NAS基础知识
一.什么是NAS 1.NAS的定义 NAS(Network Attached Storage:网络附属存储)按字面简单说就是连接在网络上,具备资料存储功能的装置,因此也称为"网络存储器&qu ...