功能:formatter 表单提交 拼接参数的形式

本文介绍了datagarid中formatter属性的应用方法,包括如何通过value、row和index参数实现单元格值的定制显示。此外,还详细展示了使用EasyUI进行表单提交的具体步骤及参数拼接的方法。

 

datagarid的formatter属性

value: 代表当前单元格中的值。row:代表当前行。index: 代表当前行的下标。

{field:'is_hot',title:'是否热门',width:20,formatter: function(value,row,index){    
if(value==1){
return "是";
}else{
return "否";
}

 

 

 

表单提交 EasyUI form形式

$('#save_form').form('submit', {
url:"${ctx}/upload", //?
success:function(data){
//关闭对话框
$("#dd").dialog("close");
//服务器返回的数据
if("1"==data){
//成功了
parent.$.messager.show({
title:'我的消息',
msg:'添加商品成功',
timeout:5000,
showType:'slide'
});
$("#dg").datagrid("reload");
}else{
//失败
$.messager.alert('我的消息','添加商品失败!');
}
}
});

 

拼接参数的形式

$.messager.confirm('确认对话框', '您确认要删除吗?', function(r){
if (r){
var url="${ctx}/category";
var params="md=del&cid="+cid;
//发起请求 删除分类
$.post(url,params,function(data){
//成功返回1
if("1"==data){
parent.$.messager.show({
title:'我的消息',
msg:'删除分类成功',
timeout:5000,
showType:'slide'
});
//重新加载数据
$("#dg").datagrid("reload");
}else if("2"==data){
//失败0
$.messager.alert('我的消息','该分类下存在商品不能删除!!!');
}else{
//失败0
$.messager.alert('我的消息','删除失败!');
}
});
}
});

转载于:https://www.cnblogs.com/shan1393/p/9241453.html

根据返回的show_pic数组有多少组,自动生成对应个数的图表。<template> <div class="app-container"> <!-- 搜索栏 --> <el-form :inline="true" :model="searchForm" class="search-form"> <el-form-item label="电池编号"> <el-input v-model="searchForm.batteryId" placeholder="请输入电池编号"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSearch">搜索</el-button> <el-button @click="resetSearch">重置</el-button> </el-form-item> </el-form> <!-- 表格 --> <el-table :data="tableData" border class="table"> <el-table-column prop="battery_id" label="电池编号" :formatter="formatTime"></el-table-column> <el-table-column prop="create_time" label="创建时间" :formatter="formatTime"></el-table-column> <el-table-column prop="update_time" label="更新时间" :formatter="formatTime"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="openDetailDialog(scope.row)" type="text">查看详情</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange" class="pagination" ></el-pagination> <!-- 详情弹窗 --> <el-dialog title="详情信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" > <div class="chart-container"> <div class="chart" ref="chart1" style="height:400px; width:1100px;"></div> <div class="chart" ref="chart2" style="height:400px; width:1100px;"></div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> </span> </el-dialog> </div> </template> <script> import axios from 'axios'; import * as echarts from 'echarts'; export default { data() { return { // 搜索表单 searchForm: { batteryId: '' }, // 表格数据 allData: [], // 所有数据 tableData: [], // 当前页数据 // 分页数据 currentPage: 1, pageSize: 10, total: 0, // 弹窗数据 dialogVisible: false, currentRow: null }; }, mounted() { this.fetchData(); }, methods: { // 搜索 onSearch() { this.currentPage = 1; this.filterData(); }, // 重置搜索 resetSearch() { this.searchForm.batteryId = ''; this.filterData(); }, // 获取所有数据(从接口) async fetchData() { try { this.$http({ url: this.$http.adornUrl(`/ai/getData`), method: 'get' }).then(({data}) => { this.allData = data; this.total = data.length; this.filterData(); // 初始化表格数据 }) } catch (error) { this.$message.error('请求数据失败,请检查网络或接口地址'); console.error(error); } }, // 过滤并分页 filterData() { const { batteryId } = this.searchForm; const filtered = batteryId ? this.allData.filter(item => item.battery_id.includes(batteryId)) : [...this.allData]; this.total = filtered.length; const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; this.tableData = filtered.slice(start, end); }, // 分页切换 handlePageChange(page) { this.currentPage = page; this.filterData(); }, // 打开详情弹窗 openDetailDialog(row) { this.currentRow = row; this.dialogVisible = true; this.$nextTick(() => { this.initCharts(); }); }, // 初始化图表 initCharts() { if (this.currentRow && this.currentRow.show_pic && this.currentRow.show_pic.length >= 2) { const chart1 = echarts.init(this.$refs.chart1); chart1.setOption(this.currentRow.show_pic[0]); const chart2 = echarts.init(this.$refs.chart2); chart2.setOption(this.currentRow.show_pic[1]); } }, // 关闭弹窗 handleClose(done) { this.$confirm('确认关闭?') .then(_ => { done(); }) .catch(_ => {}); }, formatTime(row, column, cellValue, format = 'YYYY-MM-DD HH:mm:ss') { if (!cellValue) return "-"; // 空值处理 // 统一转换为Date对象 const date = typeof cellValue === 'number' ? new Date(cellValue) : new Date(cellValue); // 验证日期有效性 if (isNaN(date.getTime())) return "无效时间"; // 格式化为 YYYY-MM-DD HH:mm:ss const pad = num => num.toString().padStart(2, '0'); return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`; } } }; </script> <style scoped> .app-container { padding: 20px; } .search-form { margin-bottom: 20px; background: #f5f7fa; padding: 15px; border-radius: 4px; } .table { border: 1px solid #ebeef5; } .pagination { margin-top: 20px; text-align: center; } .chart-container { display: flex; flex-direction: column; gap: 20px; } .chart { width: 100%; } </style>
最新发布
09-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值