主要用的是easyUI
//总的订单数据展示
function initDateOrder(params) {
$('#tt').datagrid({
url: '@Url.Action("GetOrderMainSelectJson", "Order")',
height: 360,
width: 900,
fitColumns: false,
nowrap: true,
showFooter: true,
idField: 'ID',
loadMsg: '正在加载信息...',
pagination: true,
singleSelect: false,
queryParams: params,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
columns: [
[
{ field: 'ck', checkbox: true, align: 'center', width: 30 },
{ field: 'Id', title: '序号', align: 'center', hidden: 'true' },
{ field: 'order_Id', title: '订单编号', align: 'center' },
{ field: 'orderDate', title: '订单日期', align: 'center' },
{ field: 'Market_name', title: '商场名称', align: 'center' },
{ field: 'address', title: '商场地址', align: 'center' }
]
],
toolbar: [
{
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () { showAddOrder(); }
}, '-', {
id: 'btnUpdate',
text: '查看',
iconCls: 'icon-edit',
handler: function () {
var rows = $('#tt').datagrid("getSelections");
if (rows.length != 1) {
$.messager.alert("提示", "只能选择一行进行查看");
return;
}
constructionOrder(rows[0].order_Id);
}
}, '-', {
id: 'btnDelete',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
var rows = $('#tt').datagrid("getSelections");
if (rows.length < 1) {
$.messager.alert("提示", "请选一行删除");
return;
}
$.messager.confirm("提示信息", "确定要删除吗？", function (r) {//先删除附表，在删除主表
if (r) {
var strIds = "";
for (var i = 0; i < rows.length; i++) {
strIds += rows[i].order_Id + '_'; //1_2_3
}
$.post("@Url.Action("DeleteOrderMian", "Order")", { ids: strIds }, function (data) {
if (data.msg) {
$.messager.alert("提示", "删除成功");
yecontro(4, "t_t");
$('#tt').datagrid("clearSelections");
}
});
}
});
}
}
],
OnBeforeLoad: function (param) {
return true;
}
});
//添加，取请求路径跳转
//添加
function showAddOrder() {
//转到一个大的页面进行
$("#frameAdd2").attr("src", "@Url.Action("AddOrder", "Order")");
$("#addContent").css("display", "block");
document.getElementById("bg").style.display = "block";
document.getElementById("show3").style.display = "block";
} //此处是先跳到后台的AddOrder中后面在
下面是返回到添加页面
@model WebApplication1.Models.OrderMainVm
@{
ViewBag.Title = "_AddOrder";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<link href="~/Content/demo.css" rel="stylesheet" />
<link href="~/Content/themes/gray/easyui.css" rel="stylesheet" />
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
</head>
<body>
<h2>
商品订单信息
<input type="button" id="allsave" class="btn btn-primary" value="保存" />
<input type="button" id="cancel" class="btn btn-primary" value="取消" />
<input type="button" id="reset" class="btn btn-primary" value="新建" />
</h2>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="主表信息" style="width:100%">
<div>
<form id="ff" method="post" action="">
<table cellpadding="5">
<tr>
<td>订单号:</td><!--系统生成-->
<td><input class="easyui-textbox" type="text" id="order_No" name="order_No" data-options="required:true" readonly="readonly" /></input></td>
<td>订单日期:</td>
<td><input class="easyui-datebox" type="text" id="orderdate" name="orderdate" required="required" data-options="required:true" /></input></td>
@*<td><input id="dd" type="text" class="easyui-datebox" /></td>*@
<td>订单总额:</td><!--根据下面商品总额的编号而编号-->
<td><input class="easyui-textbox" type="text" id="orderprice" name="orderprice" data-options="required:true" readonly="readonly" /></input></td>
</tr>
<tr>
<td>商城名称:</td>
<td>
<select id="market_Id" name="market_Id" onchange="changeSele()"></select>
</td>
<td>商城地址:</td>
<td><input class="easyui-textbox" type="text" id="address" name="address" data-options="required:true" readonly="readonly" /></input></td>
</td>
</tr>
</table>
</form>
</div>
</div>
<!--细表的信息-->
<!--进到对应的页面的时候才进行显示这个页面-->
<div class="easyui-panel" title="主表信息" style="width:100%">
<div>
<form id="ff" method="post" action="">
<table id="dg" title="明显列表" style="height:auto;width:100%;" iconCls="icon-save"
rownumbers="true" pagination="true"></table>
</form>
</div>
</div>
@*显示1到9,共9记录*@
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var $dg = $("#dg");
var effectRow = new Object();
var nu = 4;//记录行号
var lastIndex;
//点击取消按钮关闭窗口
$('#reset').on('click', function () {
self.parent.resetAddOrder();
});
//点击取消按钮关闭窗口
$('#cancel').on('click', function () {
self.parent.yecontro(4, "t_t");
self.parent.hidediv();
});
//点击保存按钮，一次性存入数据库
$('#allsave').on('click', function () {
var rows = $dg.datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
$dg.datagrid('endEdit', i);
}
if ($dg.datagrid('getChanges').length) {
//获取表头的数据
var effectRow = new Object();
//获得增加数据
var inserted = $dg.datagrid('getChanges', "inserted");
//获得删除数据
var deleted = $dg.datagrid('getChanges', "deleted");
//获得修改数据
var updated = $dg.datagrid('getChanges', "updated");
var sum = 0;
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
}
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
}
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
//获取商品总价格
var arr = $('#dg').datagrid('getData');
for (var i = 0; i < arr.rows.length; i++) {
sum += (arr.rows[i].tatol_money) * 1;
}
$("#_easyui_textbox_input3").val(sum);
alert("总价格是：" + sum);
var orderno = $("#_easyui_textbox_input1").val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var orderdate = $("#_easyui_textbox_input4").val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var orderprice = $("#_easyui_textbox_input3").val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var market_Id = $("#market_Id").val();
var ordered = [{ "orderno": orderno, "orderdate": orderdate, "orderprice": orderprice, "market_Id": market_Id }];
if (ordered.length) {
effectRow["ordered"] = JSON.stringify(ordered);
}
$.post("@Url.Action("AddOrderMain_Fine", "Order")", { effectRow }, function (rsp) {
if (rsp.msg) {
$.messager.alert("提示", "提交成功！");
$dg.datagrid('acceptChanges');
self.parent.yecontro(4, "t_t");
}
}, "JSON").error(function () {
$.messager.alert("提示", "提交错误了！");
//$.messager.alert("提示", "提交成功！");
self.parent.yecontro(4, "t_t");
});
}
});
//进入页面就加载
jQuery(function () {
cleadata();
function rowsChang(tem) {
}
});
function cleadata() {
//系统自动生成订单流水号
var outTradeNo = ""; //订单号
for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
{
outTradeNo += Math.floor(Math.random() * 10);
}
outTradeNo = new Date().getTime() + outTradeNo;
$("#_easyui_textbox_input1").val(outTradeNo);//这个是easyui的id
$("#order_No").text(outTradeNo);
//获取当前时间
$("#_easyui_textbox_input4").val(getNowFormatDate());
//时间改为时间框选择了
//获取商场的列表
$.ajax({
url: '@Url.Action("GetMarketSelectJson", "Market")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {},
success: function (data) {
var ct = JSON.parse(data);
var stt = "";
$.each(ct, function (i, value) {
if (i == 0) {
$('#market_Id').append(' <option value="' + value["Market_Id"] + '" >' + value["Name"] + '</option>');
$('#address').text(value["Address"]);
$('#_easyui_textbox_input3').val(value["Address"]);
} else {
$('#market_Id').append(' <option value="' + value["Market_Id"] + '">' + value["Name"] + '</option>');
}
});
},
error: function (error) {
alert("初始化下拉控件失败");
}
});
$dg.datagrid({
url: '@Url.Action("GetOrdefineSelectJson", "Order")',//这里可以去查询数据库的数据展示出来
width: 890,
height: 450,
queryParams: { "orderno": $("#_easyui_textbox_input1").val().replace(/^\s\s*/, '').replace(/\s\s*$/, '') },
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
columns: [
[
{ field: 'shopp_Id', title: '商品编号', width: 100, editor: "validatebox" },
{ field: 'shopp_name', title: '商品名称', width: 100, editor: "validatebox" },
{ field: 'shopp_price', title: '商品单价', width: 100, align: 'right', editor: {
type: 'numberbox', options: { precision: 2 } } },
{ field: 'shopp_num', title: '商品数量', width: 100, align: 'right', editor: "numberbox" },
{ field: 'tatol_money', title: '商品金额', width: 100, align: 'right', editor: {
type: 'numberbox', options: { precision: 2 } } }
]
],
toolbar: [
{
text: "添加",
iconCls: "icon-add",
handler: function () {
$dg.datagrid('appendRow', {});
var rows = $dg.datagrid('getRows');
$dg.datagrid('beginEdit', rows.length - 1);
//每增加或修改一行，easyui单元格这里的下标都是有规律的变化
var nu1 = '#_easyui_textbox_input' + (nu + 1);
var nu2 = '#_easyui_textbox_input' + (nu + 2);
var nu3 = '#_easyui_textbox_input' + (nu + 3);
//只要值发生改变就触发判断
$(nu1).on('input propertychange', function (evt) {
var t = $(nu2).val() * $(nu1).val();
setEditing(rows.length - 1, t);
});
$(nu2).on('input propertychange', function (evt) {
var t = $(nu2).val() * $(nu1).val();
setEditing(rows.length - 1, t);
});
nu = nu + 3;//增加一行，下标需要向下移动
}
},
{
text: "修改",
iconCls: "icon-edit",
handler: function () {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('beginEdit', rowIndex);
}
var rowsNo = $dg.datagrid('getRowIndex', row);//获取当前行号
var nu1 = '#_easyui_textbox_input' + (nu + 1);
var nu2 = '#_easyui_textbox_input' + (nu + 2);
var nu3 = '#_easyui_textbox_input' + (nu + 3);
//只要值发生改变就判断
$(nu1).on('input propertychange', function (evt) {
var t = $(nu2).val() * $(nu1).val();
setEditing(rowsNo, t);
});
$(nu2).on('input propertychange', function (evt) {
var t = $(nu2).val() * $(nu1).val();
setEditing(rowsNo, t);
});
nu = nu + 3;//增加一行，下标需要向下移动
}
},
{
text: "删除",
iconCls: "icon-remove",
handler: function () {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('deleteRow', rowIndex);
}
}
}
],
});
$(".datagrid-header-rownumber").html("序号");
function endEdit() {
var rows = $dg.datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
$dg.datagrid('endEdit', i);
}
}
}
//这里直接获取editors进行赋值
function setEditing(rowIndex, costmoney) {
var editors = $dg.datagrid('getEditors', rowIndex);
var costEditor = editors[4];
$(costEditor.target).numberbox('setValue', costmoney);
}
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate;
}
function submitForm() {
$('#ff').form('submit');
}
function clearForm() {
$('#ff').form('clear');
}
function changeSele() {
//js方式获取当前选中项
//拿到select的对象
var sel1 = document.getElementById('market_Id');
//获取当前选中项的索引
var index = sel1.selectedIndex;
//拿到选中的option的value
console.log(sel1.options[index].value);
var selectMarketId = sel1.options[index].value;
//拿到选中的option的text
console.log(sel1.options[index].text);
//Jquery方式获取当前选中项
var sel2 = $('#market_Id option:selected');
//拿到选中的option的value
console.log(sel2.val());
//拿到选中的option的text
console.log(sel2.text());
//同时也动态后期地址
$.ajax({
url: '@Url.Action("GetMarketSelectJson", "Market")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {},
success: function (data) {
var ct = JSON.parse(data);
var stt = "";
$.each(ct, function (i, value) {
if (value["Market_Id"] == selectMarketId) {
$('#address').text(value["Address"]);
$('#_easyui_textbox_input3').val(value["Address"]);
}
});
},
error: function (error) {
alert("获取地址失败");
}
});
}
</script>
</body>
</html>这个easyUI在添加每一行，给单元格自动赋值这里说一下
所有动态赋值通过动态获取下标，然后进行运算
//每增加或修改一行，easyui单元格这里的下标都是有规律的变化
var nu1 = '#_easyui_textbox_input' + (nu + 1);
var nu2 = '#_easyui_textbox_input' + (nu + 2);
var nu3 = '#_easyui_textbox_input' + (nu + 3);
//只要值发生改变就触发判断
$(nu1).on('input propertychange', function (evt) {
var t = $(nu2).val() * $(nu1).val();
setEditing(rows.length - 1, t);
});
$(nu2).on('input propertychange', function (evt) {
var t = $(nu2).val() * $(nu1).val();
setEditing(rows.length - 1, t);
});
nu = nu + 3;//增加一行，下标需要向下移动
扫一扫
2764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
