一般來說，錄入數(shù)據(jù)的時候，我們都采用在一個窗體界面中，根據(jù)不同內(nèi)容進(jìn)行錄入。但是有時候涉及主從表的數(shù)據(jù)錄入，從表的數(shù)據(jù)有時候?yàn)榱虽浫敕奖悖矔ㄟ^表格控件直接錄入。在Winform開發(fā)的時候，我們很多時候可以利用表格GridControl控件來直接錄入數(shù)據(jù)；在BS的Vue&Elment前端項(xiàng)目中，也可以利用第三方組件vxe-table直接錄入表格數(shù)據(jù)。本文對Winform和Vue&Elment中直接錄入數(shù)據(jù)進(jìn)行分別的介紹和對比。

PS：給大家推薦一個C#開發(fā)可以用到的界面組件——DevExpress WinForms，它能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

在Winform中直接錄入表格數(shù)據(jù)

我們可直接在底部進(jìn)行數(shù)據(jù)的錄入，包括主表記錄和從表的明細(xì)記錄，可以一氣呵成的錄入并進(jìn)行保存處理的，界面效果如下所示。

GridView的主從關(guān)系需要設(shè)置好集合的映射關(guān)系，我們需要通過設(shè)置GridLevelNode集合實(shí)現(xiàn)主從表關(guān)系的處理的。

初始化從表的GridView2和主從表關(guān)系的代碼如下所示：

通過上面的初始化代碼，指定了主從表的關(guān)系后，我們還需要對綁定的數(shù)據(jù)源進(jìn)行一定的處理，才能夠在GridControl控件上顯示主從表關(guān)系的記錄。

首先需要定義一個業(yè)務(wù)對象，用來存儲主從關(guān)系的記錄對象。

然后在BindData綁定數(shù)據(jù)的時候，代碼處理如下即可。

數(shù)據(jù)保存的代碼和前面的操作類似，我們需要分別對GridView1和GridView2的數(shù)據(jù)保存操作進(jìn)行處理，如下代碼所示。

GridView2的字典項(xiàng)目明細(xì)保存操作如下所示。

在流程管理里面，對于具有主從明細(xì)的報銷業(yè)務(wù)表的數(shù)據(jù)處理，采用了下面的界面。

這個界面中對于從表數(shù)據(jù)的錄入處理代碼如下所示。

/// <summary>
/// 初始化明細(xì)表的GridView數(shù)據(jù)顯示
/// </summary>
private void InitDetailGrid()
{
//初始清空列
this.gridView1.Columns.Clear();
//設(shè)置部分列隱藏
this.gridView1.CreateColumn("ID", "編號").Visible = false;
this.gridView1.CreateColumn("Header_ID", "主表編號").Visible = false;
this.gridView1.CreateColumn("Apply_ID", "申請單編號").Visible = false;
//添加下拉列表列，并綁定數(shù)據(jù)源
this.gridView1.CreateColumn("FeeType", "費(fèi)用類型", 100).CreateComboBox().BindDictItems("費(fèi)用類型");
//創(chuàng)建日期列并指定格式
var OccurTime = this.gridView1.CreateColumn("OccurTime", "發(fā)生時間", 120).CreateDateEdit();
OccurTime.EditMask = "yyyy-MM-dd HH:mm";
OccurTime.DisplayFormat.FormatString = "yyyy-MM-dd HH:mm";
//創(chuàng)建數(shù)值列
this.gridView1.CreateColumn("FeeAmount", "費(fèi)用金額").CreateSpinEdit();
//創(chuàng)建備注列
this.gridView1.CreateColumn("FeeDescription", "費(fèi)用說明", 200).CreateMemoEdit();

//初始化GridView，可以新增列
this.gridView1.InitGridView(GridType.NewItem, false, EditorShowMode.MouseDownFocused, "");
//轉(zhuǎn)義列內(nèi)容顯示
this.gridView1.CustomColumnDisplayText += new CustomColumnDisplayTextEventHandler(gridView1_CustomColumnDisplayText);
//處理單元格的樣式
this.gridView1.RowCellStyle += new RowCellStyleEventHandler(gridView1_RowCellStyle);
//不允許頭部排序
this.gridView1.OptionsCustomization.AllowSort = false;
//繪制序號
this.gridView1.CustomDrawRowIndicator += (s, e) =>
{
if (e.Info.IsRowIndicator && e.RowHandle >= 0)
{
e.Info.DisplayText = (e.RowHandle + 1).ToString();
}
};

//對輸入單元格進(jìn)行非空校驗(yàn)
this.gridView1.ValidateRow += delegate(object sender, ValidateRowEventArgs e)
{
var result = gridControl1.ValidateRowNull(e, new string[]
{
"FeeType"
});
};
//新增行的內(nèi)容初始化
this.gridView1.InitNewRow += (s, e) =>
{
gridView1.SetRowCellValue(e.RowHandle, "ID", Guid.NewGuid().ToString());
gridView1.SetRowCellValue(e.RowHandle, "Header_ID", tempInfo.ID);
gridView1.SetRowCellValue(e.RowHandle, "Apply_ID", tempInfo.Apply_ID);
gridView1.SetRowCellValue(e.RowHandle, "OccurTime", DateTime.Now);
};
}

保存處理的時候，我們獲取明細(xì)列表，在寫入從表記錄后，繼續(xù)保存明細(xì)列表即可。

/// <summary>
/// 獲取明細(xì)列表
/// </summary>
/// <returns></returns>
private List<ReimbursementDetailInfo> GetDetailList()
{
var list = new List<ReimbursementDetailInfo>();
for (int i = 0; i < this.gridView1.RowCount; i++)
{
var detailInfo = gridView1.GetRow(i) as ReimbursementDetailInfo;
if (detailInfo != null)
{
list.Add(detailInfo);
}
}
return list;
}

/// <summary>
/// 新增狀態(tài)下的數(shù)據(jù)保存
/// </summary>
/// <returns></returns>
public override bool SaveAddNew()
{
ReimbursementInfo info = tempInfo;//必須使用存在的局部變量，因?yàn)椴糠中畔⒖赡鼙桓郊褂?SetInfo(info);
info.Creator = base.LoginUserInfo.ID;
info.CreateTime = DateTime.Now;

try
{
#region 新增數(shù)據(jù)

bool succeed = BLLFactory<Reimbursement>.Instance.Insert(info);
if (succeed)
{
//可添加其他關(guān)聯(lián)操作
var list = GetDetailList();
foreach(var detailInfo in list)
{
BLLFactory<ReimbursementDetail>.Instance.InsertUpdate(detailInfo, detailInfo.ID);
}

return true;
}
#endregion
}
catch (Exception ex)
{
LogTextHelper.Error(ex);
MessageDxUtil.ShowError(ex.Message);
}
return false;
}

有時候，我們可以根據(jù)列表設(shè)置一些下拉列表字段，如下面所示。

或者禁用某些字段的錄入，如下所示。

在Vue&Elment中直接錄入表格數(shù)據(jù)

vxe-table地址：

我們來看看它的常規(guī)使用代碼，以及界面效果：

如果需要錄入新記錄，通過事件處理添加一個行即可。

這里繼續(xù)介紹vxe-table表格組件的直接錄入處理，特別是相關(guān)字典列表，以及級聯(lián)處理操作。

例如，對于資產(chǎn)領(lǐng)用的明細(xì)清單處理，前端界面代碼如下所示。

<el-col :span="24">
<el-form-item label="明細(xì)清單">
<div>
<vxe-toolbar>
<template #buttons>
<vxe-button status="primary" content="新增" @click="insertEvent" />
<vxe-button status="warning" content="刪除" @click="removeSelectEvent" />
</template>
</vxe-toolbar>
<vxe-table ref="xTable" border show-overflow keep-source resizable show-overflow :data="list"
:edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
<vxe-column type="checkbox" width="60" />
<vxe-column field="assetName" title="資產(chǎn)名稱"
:edit-render="{name: 'input', events: {focus: assetNameFocusEvent}}" />
<vxe-column field="assetCode" title="資產(chǎn)編碼" :visible="true" />
<vxe-column field="lyDept" title="使用部門"
:edit-render="{name: '$select', options: deptList, events: {change: deptChangeEvent}}" />
<vxe-column field="usePerson" title="使用人"
:edit-render="{name: '$select', options: usePersonList}" />
<vxe-column field="keepAddr" title="存放地點(diǎn)" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
<vxe-column field="unit" title="單位" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
<vxe-column field="price" title="單價(元)"
:edit-render="{name: '$input', props: {type: 'float', digits: 2}}" />
<vxe-column field="totalQty" title="數(shù)量"
:edit-render="{name: '$input', props: {type: 'integer'}}" />
<vxe-column field="totalAmount" title="金額(元)"
:edit-render="{name: '$input', props: {type: 'float', digits: 2}}" />
<vxe-column field="note" title="備注" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
</vxe-table>
</div>
</el-form-item>
</el-col>

我們在選擇資產(chǎn)名稱的時候，通過焦點(diǎn)事件彈出一個資產(chǎn)選擇的對話框處理，如下所示的代碼：

events: {focus: assetNameFocusEvent}}

然后在事件中，我們彈出一個對話框來：

assetNameFocusEvent ({ row, column }) {
this.currentRow = row
this.$refs.asset.show()
},

如果是下拉列表，我們可以綁定自己的數(shù)據(jù)源即可，如下面界面部門列表所示。

如果需要錄入數(shù)據(jù)中的列表進(jìn)行聯(lián)動處理，如在事件ptypeChangeEvent中更新pnameList可以實(shí)現(xiàn)：

<vxe-column field="attr3" title="Project type"
:edit-render="{name: '$select', options: ptypeList, props: {clearable: true}, events: {change: ptypeChangeEvent}}"></vxe-column>
<vxe-column field="attr4" title="Project name" :formatter="formatPanmeLabel"
:edit-render="{name: '$select', options: pnameList, props: {clearable: true}}"></vxe-column>

// 更新級聯(lián)選項(xiàng)列表
updatePnameList (row) {
let ptype = row.attr3
let pnameList = []
if (ptype) {
let item = this.cachePnameList.find(item => item.ptype === ptype)
if (item) {
pnameList = item.pnameList
} else {
// 模擬后臺數(shù)據(jù)
Array.from(new Array(XEUtils.random(3, 8))).forEach((item, index) => {
pnameList.push({
label: `${ptype}-名稱${index}`,
value: `${ptype}_${index}`
})
})
this.cachePnameList.push({ ptype, pnameList })
}
}
this.pnameList = pnameList
},
ptypeChangeEvent ({ row }) {
// 類型切換時更新級聯(lián)的下拉數(shù)據(jù)
row.attr4 = ''
this.updatePnameList(row)
},

對于Vxe-table組件的列，它的edit-render標(biāo)記它的類型處理。

列的類型可以是普通的input，也可以是其他類型，如數(shù)值類型、下拉列表、日期等類型，下面一些案例代碼供參考。

<vxe-column type="seq" width="60" />
<vxe-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-column>
<vxe-column field="nickname" title="Role"
:edit-render="{name: 'input', attrs: {type: 'text', placeholder: '請輸入昵稱'}}"></vxe-column>
<vxe-column field="sex" title="Sex"
:edit-render="{name: '$select', options: sexList}"></vxe-column>
<vxe-column field="sex2" title="多選下拉"
:edit-render="{name: '$select', options: sexList, props: {multiple: true}}"></vxe-column>
<vxe-column field="num1" title="Amount"
:edit-render="{name: '$input', props: {type: 'float', digits: 2}}"></vxe-column>
<vxe-column field="date12" title="Date"
:edit-render="{name: '$input', props: {type: 'date', placeholder: '請選擇日期'}}"></vxe-column>
<vxe-column field="date13" title="Week"
:edit-render="{name: '$input', props: {type: 'week', placeholder: '請選擇日期'}}"></vxe-column>

<vxe-column field="age" title="ElInputNumber" width="160" :edit-render="{}">
<template #edit="{ row }">
<el-input-number v-model="row.age" :max="35" :min="18"></el-input-number>
</template>
</vxe-column>

其中列的Type類型如下定義所示，可以選擇特定的類型。

如果input類型，那么可以選擇各種格式的輸入界面，如下所示。

具體的信息可以查看控件的API說明：

以上就是關(guān)于在Winform中直接錄入表格數(shù)據(jù)和在Vue&Elment中直接錄入表格數(shù)據(jù)的介紹，總體來說都是比較方便的，數(shù)據(jù)可以分開主從表錄入，也可以一并提供數(shù)據(jù)對象給后臺一并處理，具體根據(jù)情況處理即可。

本文轉(zhuǎn)載自：