miniui中datagrid表格当前行根据下拉框的值去改变当前行某一列的编辑状态及配置相对应的值
例如这个需求（下图）：注：因为这个问题困扰了我一个星期，现在已经解决掉，我把它记录一下，因为我自己也在网上找了，当作是我自己的总结吧。
（1)上图，‘产品名称’关联OA存货档案,当【产品属性】为【主机】、【板材】、【LED灯】时，必须选择，当【产品属性】是【配件】时可编辑配件名称。
（2)上图，‘防伪码’删除，改为‘产品属性’，并设为选择器(产品主机、配件、板材、LED灯)，数据联动：当产品属性=配件或板材或LED灯时，数量默认空，必填。当产品属性=产品主机时，数量默认1，不可编辑
前台HTML界面
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/boot.js" type="text/javascript"></script>
<%--<link href="../../res/Default.css" rel="stylesheet" type="text/css" />--%>
<script src="../../scripts/Mydate/WdatePicker.js"></script>
<style type="text/css">
html, body {
font-size: 12px;
padding: 0;
margin: 0;
border: 0;
height: 100%;
overflow: hidden;
}
.auto-style1 {
width: 100%;
height: 16px;
}
</style>
</head>
<body>
<div class="mini-toolbar" style="padding: 2px; border: 0;">
<table style="width: 100%;">
<tr>
<td class="auto-style1">
<a class="mini-button" iconcls="icon-add" name="adds" onclick="addRow()" plain="true">增行</a>
<span class="separator"></span>
<a class="mini-button" iconcls="icon-del" name="del" onclick="delRow()" plain="true">删行</a>
<span class="separator"></span>
<a class="mini-button" iconcls="icon-save" name="save" onclick="onOk" plain="true">保存</a>
<span class="separator"></span>
<a class="mini-button" iconcls="icon-close" name="close" onclick="onCancel" plain="true">关闭</a>
<span class="separator"></span>
</td>
</tr>
</table>
</div>
<%-- <div>
<h1 style="text-align: center">采购订单</h1>
</div>--%>
<div style="padding: 5px;">
<table style="width: 95%;">
<tr>
<td>报修单号：</td>
<td>
<input id="ccode" class="mini-textbox" readonly="true" />
</td>
<td>报修日期：</td>
<td>
<input id="ddate" class="mini-datepicker" />
</td>
<td style="color:blue;">客户名称：</td>
<td>
<input id="ccuscode" class="mini-combobox" textField="ccusname" valueField="ccuscode" emptyText="请选择..."
url="BXMethod.ashx?Method=GetCus" required="true" allowInput="false" onvaluechanged="onDeptChanged" />
</td>
</tr>
<tr>
<td style="color:blue;">联系人：</td>
<td>
<input id="lxper" class="mini-textbox" />
</td>
<td style="color:blue;">手机号：</td>
<td>
<input id="lxtel" class="mini-textbox" />
</td>
<td style="color:blue;">客户分类：</td>
<td>
<input id="ccuscname" class="mini-textbox" style="width:150px;" readonly="true" />
</td>
</tr>
<tr>
<td style="color:blue;">物流方式：</td>
<td style="color:blue;">
<input id="wltype" class="mini-combobox" data="[{id: '物流', text: '物流'}, {id: '快递', text: '快递'}, {id: '送货上门', text: '送货上门'}]" />
</td>
<td style="color:blue;">物流单号：</td>
<td>
<input id="wlcode" class="mini-textbox" />
</td>
<td style="color:blue;">维修完回寄方式：</td>
<td>
<input id="rtype" class="mini-combobox" data="[{id: '物流', text: '物流'}, {id: '快递', text: '快递'}, {id: '送货上门', text: '送货上门'}]" />
</td>
</tr>
<tr>
<td style="color:blue;">维修完收件地址：</td>
<td colspan="5">
<input id="faddr" type="text" class="mini-textbox" style="width: 94%;" runat="server" />
</td>
</tr>
<tr>
<td style="color:blue;">件数：</td>
<td>
<input id="inum" class="mini-spinner" <%--allowLimitValue="false"--%> minValue="0"/>
</td>
<td>备注：</td>
<td colspan="3">
<input id="cmemo" type="text" class="mini-textbox" style="width: 94%;" runat="server" />
</td>
</tr>
</table>
<div id="datagrid1" class="mini-datagrid" style="width: 98%" url="BXMethod.ashx?Method=EBind" showpager="false" pagesize="500"
allowcelledit="true" allowcellselect="true" editnextonenterkey="true" editnextrowcell="true" oncellbeginedit="OnCellBeginEdit" oncellcommitedit="OnCellCommitEdit"
allowsortcolumn="false" idfield="cinvcode" showsummaryrow="true" ondrawsummarycell="onDrawSummaryCell" multiselect="true" >
<div property="columns">
<div type="indexcolumn"></div>
<div type="checkcolumn"></div>
<div field="issf" width="150px" headeralign="center">
处理方式
<input property="editor" class="mini-combobox" style="width:150px;" data="dds"/>
</div>
<div field="wlno" id="wlno" width="150px" headeralign="center">
产品属性
<input property="editor" class="mini-combobox" style="width:150px;" data="sa"/>
<%--<input property="editor" class="mini-select" style="width: 100%;" />--%>
</div>
<div field="cinvname" id="cinvname" width="150px" allowsort="true" >
产品名称
<input property="editor" class="mini-buttonedit" style="width: 150px;" allowInput="false" onbuttonclick="onCEdit"/>
</div>
<div field="pjmc" width="100px" headeralign="center" allowsort="true">
配件名称
<input property="editor" class="mini-textbox" style="width: 100px"/>
</div>
<div field="iquantity" width="100px" headeralign="center" summarytype="sum" >
数量
<input property="editor" class="mini-textbox" style="width: 150px;" emptyText="板材按片填写"/>
</div>
<div field="fault" width="150px" headeralign="center">
故障现象
<input property="editor" class="mini-textbox" style="width: 150px;" />
</div>
<div field="xssj" width="1px" headeralign="center">
销售售价
<input property="editor" class="mini-textbox" style="width: 150px;"/>
</div>
<div field="cinvcode" id="cinvcode" width="1px" headeralign="center">
产品编码
<input property="editor" class="mini-textbox" style="width: 150px;"/>
</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
js代码
<script type="text/javascript">
mini.parse();
var usercode = '<%=Request.Cookies["user"].Values["usercode"].ToString()%>';
var username = '<%=Request.Cookies["user"].Values["username"].ToString()%>';
var grid = mini.get("datagrid1");
var strtype, ccode;
var irowno;
//弹出子窗体
var win = null;
function onCEdit(e) {
var btnEdit1 = e.sender;
var record = e.record;
var rows = grid.getData();
var row1 = grid.getSelected();
var index = grid.indexOf(row1);
var s = row1.wlno;
mini.open({
url: bootPATH +"../Comn/cp/cp.aspx?Ctype=" + s,
title: "选择产品",
width: 1050,
height: 680,
ondestroy: function (action) {
if (action == "ok") {
var iframe = this.getIFrameEl();
var data = iframe.contentWindow.GetData();
data = mini.clone(data);
var strname= "" + data.field0002 + "";
var strcode = "" + data.field0001 + "";
var strnum = "" + data.field0006 + "";
$.ajax({
url: "cp.ashx?Method=Bind",
cache: false,
success: function (text) {
var dd = eval(text);
赋值
var row = rows[index];
grid.updateRow(row, { cinvcode: strcode, cinvname: strname, xssj: strnum });
grid.cancelEdit();
}
});
}
}
});
}
//自定义格式化单元格内容
grid.on("cellcommitedit", function (e) {
var grids = e.sender,
record = e.record,
field = e.field,
value = e.value;
if (field == "wlno" && value != undefined) {
if (value == "主机") {
grids.updateRow(record, { iquantity: "1", pjmc: "-",cinvname:null }) //修改单元格数量
/* e.cancel = true; */ //不允许编辑
}
else if (value == "LED灯" || value == "板材") {
grids.updateRow(record, { iquantity: "0", pjmc: "-",cinvname:null })
// grid.cancelEdit();
// e.cancel = false;
}
else if (value == "配件") {
grids.updateRow(record, { iquantity: "0", pjmc: null,cinvname:null })
}
}
});
//增行
function addRow() {
var newRow = { name: "New Row"};
grid.addRow(newRow, 0);
grid.beginEditCell(newRow, "wlno");
}
//编辑前控制
function OnCellBeginEdit(e) {
var grid1 = mini.get("datagrid1");
var grid = e.sender;
var row = grid.getSelected();
var record = e.record, field = e.field;
var editor = e.editor
//alert(e.value);
if (field == "cinvname") {
if (record.wlno == null || record.wlno == "") {
e.cancel = true;
}
//if (record.wlno == "主机" || record.wlno == "LED灯" || record.wlno == "板材" || record.wlno == "配件" ) {
// grid.updateRow(record, { cinvname:null, xssj: "", cinvcode:"" })
//}
}
if (field == "iquantity") {
if (record.wlno == "主机" && record.iquantity == "1") {
e.cancel = true;
}
}
if (field == "pjmc") {
if (record.wlno == "主机" || record.wlno == "LED灯" || record.wlno == "板材") {
e.cancel = true;
}
}
}
function onDeptChanged(e) {
var ccuscode = mini.get("ccuscode").getValue();
$.ajax({
url: "BXMethod.ashx?Method=GetCname&ccuscode=" + ccuscode,
cache: false,
success: function (text) {
mini.get("ccuscname").setValue(text);
}
});
}
//提交后编辑
function OnCellCommitEdit(e) {
var grid = e.sender;
var record = e.record;
var field = e.field; value = e.value;
var row = grid.getSelected();
if (field == "wlno") {
$.ajax({
url: "BXMethod.ashx?Method=GetWL",
cache: false,
data: { wlno: value },
success: function (text) {
if (text != "无") {
var dd = eval(text);
grid.updateRow(record, { cinvcode: dd[0].cinvcode, cinvname: dd[0].cinvname, issf: dd[0].issf });
}
}
});
}
}
//删行
function delRow() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
grid.removeRows(rows, true);
}
}
//求和
function onDrawSummaryCell(e) {
var result = e.result;
var grid = e.sender;
//汇总计算
if (e.field == "iquantity") {
e.cellHtml = e.cellHtml;
}
}
//转换时间
$(function () {
var getdate = new Date();
mini.get("ddate").setValue(getdate.getFullYear() + '-' + (getdate.getMonth() + 1).toString() + '-' + getdate.getDate());
});
var sa = [{ id: '主机', text: '主机' }, { id: '板材', text: '板材' }, { id: 'LED灯', text: 'LED灯' }, { id: '配件', text: '配件' }];
var dds = [{ id: '产品维修', text: '产品维修' }, { id: '旧件换新', text: '旧件换新' }, { id: '旧件返还', text: '旧件返还' }];
//绑定数据
function SetData(data) {
var h = 500;
document.getElementById("datagrid1").style.height = h.toString() + "px";
strtype = data.action;
ccode = data.ccode;
if (data.action == "edit") {
// 跨页面传递的数据对象，克隆后才可以安全使用
data = mini.clone(data);
$.ajax({
url: "BXMethod.ashx?Method=Get&ccode=" + data.ccode,
cache: false,
success: function (text) {
var dd = eval(text);
mini.get("ccode").setValue(dd[0].ccode);//单号
mini.get("ddate").setValue(dd[0].ddate);//日期
mini.get("ccuscode").setValue(dd[0].ccuscode);//客户
mini.get("ccuscode").setText(dd[0].ccusname);//客户
mini.get("ccuscname").setValue(dd[0].ccuscname);//客户分类
mini.get("lxper").setValue(dd[0].lxper);//联系人
mini.get("lxtel").setValue(dd[0].lxtel);//联系电话
mini.get("wltype").setValue(dd[0].wltype);//物流方式
mini.get("wlcode").setValue(dd[0].wlcode);//物流单号
mini.get("rtype").setValue(dd[0].rtype);//返回方式
mini.get("inum").setValue(dd[0].inum);//件数
mini.get("cmemo").setValue(dd[0].cmemo);//备注
mini.get("faddr").setValue(dd[0].faddr);//维修完收件地址
//刷新
grid.load({ccode: data.ccode});
}
});
} else if (data.action == "look"){
mini.getbyName("adds").setEnabled(false);
mini.getbyName("del").setEnabled(false);
mini.getbyName("save").setEnabled(false);
//mini.getbyName("close").setEnabled(false);
$.ajax({
url: "BXMethod.ashx?Method=Get&ccode=" + data.ccode,
cache: false,
success: function (text) {
var dd = eval(text);
mini.get("ccode").setValue(dd[0].ccode);//单号
mini.get("ddate").setValue(dd[0].ddate);//日期
mini.get("ccuscode").setValue(dd[0].ccuscode);//客户
mini.get("ccuscode").setText(dd[0].ccusname);//客户
mini.get("ccuscname").setValue(dd[0].ccuscname);//客户分类
mini.get("lxper").setValue(dd[0].lxper);//联系人
mini.get("lxtel").setValue(dd[0].lxtel);//联系电话
mini.get("wltype").setValue(dd[0].wltype);//物流方式
mini.get("wlcode").setValue(dd[0].wlcode);//物流单号
mini.get("rtype").setValue(dd[0].rtype);//返回方式
mini.get("inum").setValue(dd[0].inum);//件数
mini.get("cmemo").setValue(dd[0].cmemo);//备注
mini.get("faddr").setValue(dd[0].faddr);//收货地址
//刷新
grid.load({ ccode: data.ccode });
}
});
} else {
var getdate = new Date();
mini.get("ddate").setValue(getdate.getFullYear() + '-' + (getdate.getMonth() + 1).toString() + '-' + getdate.getDate());
}
}
//保存
function SaveData() {
mini.getbyName("save").setEnabled(false);
//表头
var ccode = mini.get("ccode").getValue();//报修单号
var ddate = mini.get("ddate").getValue();//报修日期
var ccuscode = mini.get("ccuscode").getValue();//客户
var ccusname = mini.get("ccuscode").getText();//客户
var lxper = mini.get("lxper").getValue();//联系人
var row = grid.getSelected();
if (lxper == "") {
alert("联系人不能为空"); mini.getbyName("save").setEnabled(true); return;
}
var lxtel = mini.get("lxtel").getValue();//联系电话
if (lxtel == "") {
alert("手机号不能为空"); mini.getbyName("save").setEnabled(true); return;
}
if (lxtel.length < 11) {
alert("手机号不符合规则"); mini.getbyName("save").setEnabled(true); return;
}
if (lxtel.substr(0, 1) != "1") {
alert("手机号不符合规则"); mini.getbyName("save").setEnabled(true); return;
}
var ccuscname = mini.get("ccuscname").getValue();//客户分类
//if (ccuscname == "") {
// alert("客户不能为空"); mini.getbyName("save").setEnabled(true); return;
//}
var wltype = mini.get("wltype").getValue();//物流方式
if (lxper == "") {
alert("物流方式不能为空"); mini.getbyName("save").setEnabled(true); return;
}
var wlcode = mini.get("wlcode").getValue();//物流单号
if (wlcode == "") {
alert("物流单号不能为空"); mini.getbyName("save").setEnabled(true); return;
}
var rtype = mini.get("rtype").getValue();//返回方式
if (lxper == "") {
alert("返回方式不能为空"); mini.getbyName("save").setEnabled(true); return;
}
var inum = mini.get("inum").getValue();//返回方式
if (parseFloat(inum) <= 0) {
alert("件数不能小于1"); mini.getbyName("save").setEnabled(true); return;
}
var cmemo = mini.get("cmemo").getValue();//备注
var faddr = mini.get("faddr").getValue();//收件地址
if (faddr == "") {
alert("收件地址不能为空"); mini.getbyName("save").setEnabled(true); return;
}
//表体
var data = grid.getData();
var json = mini.encode(data);
if (eval(json).length < 1) {
alert("未填写明细"); mini.getbyName("save").setEnabled(true); return;
}
for (var i = 0; i < data.length; i++) {
//获取每一行的数据
if (data[i].wlno == "配件" && data[i].pjmc == null) {
alert("当前配件名称不能为空，无法保存"); mini.getbyName("save").setEnabled(true); return;
}
if (data[i].wlno == "配件" && data[i].pjmc == "") {
alert("当前配件名称不能为空，无法保存"); mini.getbyName("save").setEnabled(true); return;
}
if (data[i].wlno == null|| data[i].wlno == "")
{
alert("当前表格中有空行，无法保存"); mini.getbyName("save").setEnabled(true); return;
}
if (data[i].wlno == "板材"||data[i].wlno == "LED灯") {
if (data[i].iquantity == null||data[i].iquantity == ""|| data[i].iquantity==0) {
alert("数量不能为空或0"); mini.getbyName("save").setEnabled(true); return;
}
}
if (data[i].wlno == "配件") {
if (data[i].iquantity == null || data[i].iquantity == "" || data[i].iquantity == 0){
alert("数量不能为0或空"); mini.getbyName("save").setEnabled(true); return;
}
}
}
var dd = { ccode: ccode, ddate: ddate, ccuscode: ccuscode, ccusname: ccusname, inum: inum, lxper: lxper, lxtel: lxtel, ccuscname: ccuscname, wltype: wltype, wlcode: wlcode, rtype: rtype, faddr: faddr, cmemo: cmemo, strtype: strtype};
var bjson = mini.encode([dd]);
$.ajax({
url: "BXMethod.ashx?Method=Save",
type: 'post',
data: { data: json, bdata: bjson },
cache: false,
success: function (text) {
if (text == "1") {
alert("保存成功");
CloseWindow("save");
} else {
mini.getbyName("save").setEnabled(true);
alert(text);
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
CloseWindow();
}
});
}
//关闭
function CloseWindow(action) {
if (action == "close" && form.isChanged()) {
if (confirm("数据被修改了，是否先保存？")) {
return false;
}
}
if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
else window.close();
}
//保存触发
function onOk(e) {
SaveData();
}
//关闭触发
function onCancel(e) {
CloseWindow("cancel");
}
</script>
————————————————
版权声明：本文为CSDN博主「大刺头」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45846870/article/details/112673258
