Dev的datagirdview中combobox多級聯動

阿新 • • 發佈：2019-01-24

datagridview中的column為combobox時的資料繫結和聯動，就是同一行的後面的combobox根據前面的列的combobox變化而變化
下面是用dev的asp.net控制元件做的combobox3級聯動的一個小demo:
aspx檔案:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v8.1, Version=8.1.3.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1"namespace="DevExpress.Web.ASPxGridView"

tagprefix="dxwgv" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v8.1, Version=8.1.3.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1"namespace="DevExpress.Web.ASPxEditors" tagprefix="dxe" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MutilCombobox</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" Width="427px"
KeyFieldName=

"id"
oncelleditorinitialize="ASPxGridView1_CellEditorInitialize"
oncustomcallback="ASPxGridView1_CustomCallback"
oncancelrowediting="ASPxGridView1_CancelRowEditing">
<SettingsEditing Mode="Inline" />
<Columns>
<dxwgv:GridViewCommandColumn Caption="編輯">
<EditButton Visible="true"></EditButton>
</dxwgv:GridViewCommandColumn>
<dxwgv:GridViewDataComboBoxColumn Caption="年份" FieldName="year" Width="100px">
<PropertiesComboBox ValueType="System.String">
<%--設定客戶端回傳事件--%>
<ClientSideEvents SelectedIndexChanged="function(s, e){ASPxGridView1.PerformCallback('year');}" />
</PropertiesComboBox>
</dxwgv:GridViewDataComboBoxColumn>
<dxwgv:GridViewDataComboBoxColumn Caption="部門" FieldName="dept" Width="200px">
<PropertiesComboBox ValueType="System.String">
<%--設定客戶端回傳事件--%>
<ClientSideEvents SelectedIndexChanged="function(s, e){ASPxGridView1.PerformCallback('dept');}" />
</PropertiesComboBox>
</dxwgv:GridViewDataComboBoxColumn>
<dxwgv:GridViewDataComboBoxColumn Caption="人員" FieldName="person" Width="300px">
<PropertiesComboBox ValueType="System.String"></PropertiesComboBox>
</dxwgv:GridViewDataComboBoxColumn>
</Columns>
</dxwgv:ASPxGridView>
</div>
</form>
</body>
</html>

aspx.cs:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using DevExpress.Web.ASPxEditors;
using System.Web.UI.MobileControls;
using System.Collections.Generic;
using DevExpress.Web.ASPxGridView;
public partial class Default2 : System.Web.UI.Page
{
//整個資料來源
private DataTable main = null;
//繫結gridview的資料來源
private DataTable init = null;
//是否部門selectindexchanged
privatebool isDept = false;
//
privateint yearSelectindex = 0;
//是否年份selectindexchanged
privatebool isYear = false;
//不連線資料庫，建立臨時表
private DataTable CreateMainData()
{
DataTable table = new DataTable();
table.Columns.Add("id", typeof(int));
table.Columns.Add("rowid", typeof(int));
table.Columns.Add("year", typeof(string));
table.Columns.Add("dept", typeof(string));
table.Columns.Add("person", typeof(string));
int m = 0;
for (int i = 0; i < 3; i++)
{
for (int j = 2007; j < 2010; j++)
{
for (int k = 0; k < 5; k++)
{
for (int l = 0; l < 3; l++)
{
DataRow row = table.NewRow();
row[0] = m;
row[1] = i;
row[2] = j.ToString();
row[3] = j + "_dept_" + k;
row[4] = row[3] + "_person_" + l;
table.Rows.Add(row);
m++;
}
}
}
}
return table;
}
//從總資料來源中獲取girdview的繫結表
private DataTable GetInit()
{
if (Session["main"] == null)
returnnull;
else
{
DataTable mainTable = (DataTable)Session["main"];
DataTable table = new DataTable();
table.Columns.Add("id", typeof(int));
table.Columns.Add("rowid", typeof(int));
table.Columns.Add("year", typeof(string));
table.Columns.Add("dept", typeof(string));
table.Columns.Add("person", typeof(string));
DataRow[] rows = mainTable.Select("person='2007_dept_0_person_0' and rowid=0");
table.Rows.Add(rows[0][0], rows[0][1], rows[0][2], rows[0][3], rows[0][4]);
rows = mainTable.Select("person='2007_dept_0_person_0' and rowid=1");
table.Rows.Add(rows[0][0], rows[0][1], rows[0][2], rows[0][3], rows[0][4]);
rows = mainTable.Select("person='2007_dept_0_person_0' and rowid=2");
table.Rows.Add(rows[0][0], rows[0][1], rows[0][2], rows[0][3], rows[0][4]);
return table;
}
}
protectedvoid Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//建立資料來源和繫結gridview
this.main = CreateMainData();
Session["main"] = main;
this.init = GetInit();
this.ASPxGridView1.DataSource = this.init.DefaultView;
this.ASPxGridView1.DataBind();
}
}
//進入編輯狀態的回撥的初始化
protectedvoid ASPxGridView1_CellEditorInitialize(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewEditorEventArgs e)
{
if (Session["main"] == null)
return;
DataTable table = (DataTable)Session["main"];
//設定年的combobox的items
if (e.Column.FieldName == "year")
{
ASPxComboBox cboYear = e.Editor as ASPxComboBox;
cboYear.Items.Clear();
DataRow[] rows = null;
if (Session["year"] == null)
{
rows = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex);
Session["year"] = rows;
}
else
rows = (DataRow[])Session["year"];
if (rows.Length < 1)
{
cboYear.Text = "";
return;
}
else
{
//是否是初始化
if(!IsCallback)
cboYear.Text = rows[0][2].ToString();
}
foreach (DataRow row in rows)
{
if(cboYear.Items.IndexOfText(row[2].ToString()) < 0)
cboYear.Items.Add(row[2].ToString());
}
//cboYear.SelectedIndex = cboYear.Items.IndexOfText(cboYear.Text);
cboYear.SelectedIndexChanged += new EventHandler(cboYear_SelectedIndexChanged);
cboYear.SelectedIndexChanged += new EventHandler(cboYear_SelectedIndexChanged);
}
//設定部門的combobox的items
elseif (e.Column.FieldName == "dept")
{
ASPxComboBox cboDept = e.Editor as ASPxComboBox;
cboDept.Items.Clear();
DataRow[] rows = null;
if (Session["dept"] == null)
{
rows = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + this.ASPxGridView1.GetRowValues(this.ASPxGridView1.EditingRowVisibleIndex, "year").ToString() + "'");
Session["dept"] = rows;
}
else
rows = (DataRow[])Session["dept"];
if (rows.Length < 1)
{
cboDept.Text = "";
return;
}
else
{
//如果不是“部門”的回傳，則預設選擇第一項
if (!this.isDept)
cboDept.Text = rows[0][3].ToString();
}
foreach (DataRow row in rows)
{
if (cboDept.Items.IndexOfText(row[3].ToString()) < 0)
cboDept.Items.Add(row[3].ToString());
}
//cboDept.SelectedIndex = cboDept.Items.IndexOfText(cboDept.Text);
cboDept.SelectedIndexChanged -= new EventHandler(cboDept_SelectedIndexChanged);
cboDept.SelectedIndexChanged += new EventHandler(cboDept_SelectedIndexChanged);
}
//設定人員的combobox的items
elseif (e.Column.FieldName == "person")
{
ASPxComboBox cboPerson = e.Editor as ASPxComboBox;
cboPerson.Items.Clear();
DataRow[] rows = null;
if (Session["person"] == null)
{
rows = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + this.ASPxGridView1.GetRowValues(this.ASPxGridView1.EditingRowVisibleIndex, "year").ToString() + "' and dept='" + this.ASPxGridView1.GetRowValues(this.ASPxGridView1.EditingRowVisibleIndex, "dept").ToString() + "'");
Session["person"] = rows;
}
else
rows = (DataRow[])Session["person"];
if (rows.Length < 1)
{
cboPerson.Text = "";
return;
}
else
{
if (cboPerson.SelectedIndex >= 0)
cboPerson.Text = cboPerson.SelectedItem.Text;
else
cboPerson.Text = rows[0][4].ToString();
}
foreach (DataRow row in rows)
{
if (cboPerson.Items.IndexOfText(row[4].ToString()) < 0)
cboPerson.Items.Add(row[4].ToString());
}
}
}
//部門selectindexchanged事件
void cboDept_SelectedIndexChanged(object sender, EventArgs e)
{
this.isDept = true;
if (Session["main"] == null)
return;
DataTable table = (DataTable)Session["main"];
ASPxComboBox cboDept = (ASPxComboBox)sender;
DataRow[] deptrows = (DataRow[])Session["dept"];
//更新人員聯動資訊
Session["person"] = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + deptrows[0][2].ToString() + "' and dept='" + cboDept.SelectedItem.Text + "'");
}
//年份selectindexchanged事件
void cboYear_SelectedIndexChanged(object sender, EventArgs e)
{
this.isYear = true;
this.isDept = false;
if (Session["main"] == null)
return;
DataTable table = (DataTable)Session["main"];
ASPxComboBox cboYear = (ASPxComboBox)sender;
this.yearSelectindex = cboYear.SelectedIndex;
//更新部門聯動資訊
DataRow[] deptrows = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + cboYear.SelectedItem.Text + "'");
Session["dept"] = deptrows;
//更新人員聯動資訊
if (deptrows.Length > 0)
Session["person"] = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + cboYear.SelectedItem.Text + "' and dept='" + deptrows[0][3].ToString() + "'");
else
Session["person"] = new DataRow[] { };
}
//客戶端回撥事件
protectedvoid ASPxGridView1_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e)
{
//如果是“年份”的回撥，則修改相應的聯動資訊
if (e.Parameters.Equals("year"))
{
this.isYear = true;
this.isDept = false;
if (Session["main"] == null)
return;
DataTable table = (DataTable)Session["main"];
DataRow[] yearrows = (DataRow[])Session["year"];
List<string> strings = new List<string>();
foreach (DataRow row in yearrows)
{
if (strings.IndexOf(row[2].ToString()) < 0)
strings.Add(row[2].ToString());
}
DataRow[] deptrows = new DataRow[] { };
if (yearrows.Length > 0)
deptrows = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + strings[this.yearSelectindex] + "'");
Session["dept"] = deptrows;
if (deptrows.Length > 0)
Session["person"] = table.Select("rowid=" + this.ASPxGridView1.EditingRowVisibleIndex + " and year='" + strings[this.yearSelectindex] + "' and dept='" + deptrows[0][3].ToString() + "'");
else
Session["person"] = new DataRow[] { };
}
}
//編輯狀態切換
protectedvoid ASPxGridView1_CancelRowEditing(object sender, DevExpress.Web.Data.ASPxStartRowEditingEventArgs e)
{
Session["year"] = null;
Session["dept"] = null;
Session["person"] = null;
}
}

沒有寫girdview的update事件。執行效果截圖，

Dev的datagirdview中combobox多級聯動

datagridview中的column為combobox時的資料繫結和聯動，就是同一行的後面的combobox根據前面的列的combobox變化而變化下面是用dev的asp.net控制元件做的combobox3級聯動的

JQ中多級聯動下拉選擇框

少量程式碼,實現大功能! html程式碼不多說,貼圖出來! 效果如下: 下拉效果如下: 重點來了,js程式碼是重重之重: $(function () { $(".formOptio

多級聯動系列——ajax調用XML實現三級聯動

title div sdn 選擇器 class var () doc img ajax 使用起來特別的方便，再也不操心瀏覽器兼容問題了。用ajax調用XML頁面中的內容，來生成三級聯動，OK廢話不多說，跟著我一步步寫吧。首先寫一個XML文件。data.xml <

vue中的三級聯動

src 2-2 效果技術分享所有級聯 pla template png 1、template裏面的內容 2、js裏面的內容 3、函數怎麽寫？這是一個省市區的三級聯動，首先你要傳遞中國的id，這樣才能獲取到所有的省份，所以在vue的項目中，我需要發一次進頁面就請求

easyui中combobox 取值

pre com 顯示 field pen eas eth eight fun <input id="cmbstrTrainType" class="easyui-combobox" name="cmbstrTrainType" style="width:102px;

winfrom datagridview中DataGridViewTextBoxColumn的聯動處理

color view AD DG 對象當前 bob cell lse 這個問題有兩種方法第一種是用DataGridview中自帶的DataGridViewTextBoxColumn 控件，第二種是動態添加combobox控件方法一：首先窗體上拖拽一個 Dat

jquery 實現前端select標籤多級聯動

前端程式碼 function loadData(type,pid) { $.getJSON('BookTypeList.ashx', { type: type, pid: pid }, function (data) {

電商入口網站商品品類多級聯動SpringBoot+Thymeleaf實現

在淘寶、京東等電商網站，其入口網站都有一個商品品類的多級聯動，滑鼠移動，就顯示，因為前端不是我做的，所以不說明前端實現，只介紹後端實現。搭建部署SpringBoot環境配置檔案配置：開啟了對Thymeleaf模組引擎的支援 server: port: 8081 #logging: # conf

pandas中建立多級索引的方法

（1）方法一：使用pandas.MultiIndex.from_arrays() In [25]: pd.MultiIndex.from_arrays([['a', 'a', 'b', 'b'],[1, 2, 1, 2]]) Out[25]: MultiIndex(levels=[['a',

微信小程式開發：二級、三級等多級聯動選單

二級級聯效果三級聯動效果二級聯動和三級聯動的程式碼結構都是一樣，就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g

pandas中的多級index操作

在pandas中可以為series和dataframe設定多個index，也就是說可以有多級index和column。這樣可以對pandas的操作更加靈活。 import numpy as np import pandas as pd from pandas import Serie

EasyUI中Combobox查詢預設選中查詢結果第一項

1.下面是js檔案中直接根據id載入資料的方法。紅框是載入第一項的通用方法，載入的是data的值，其中changeArr是一個json陣列，注意valueField和textField與json陣列的“鍵”：id和name保持一致。 2.也可以從資

layui與多級聯動返填

.net MVC 下拉多級聯動及MVC Html.DropDownList 和DropDownListFor

第一種方式前臺html <div style="margin:50px 0"> <span>省份：</span> <select id="Province"> <option>請選擇</opt

JQuery中的省市聯動

需求分析: 在我們的登錄檔單中,通常我們需要知道使用者的籍貫,需要一個給用選擇的項,當用戶選中了省份之後,列出省下面所有的城市. 技術分析: 1. 準備工作 : 城市資訊的資料 2. 新增節點 : appendChild (JS)

二級聯動，多級聯動

首先，二級聯動，還是多級聯動小夥伴們不要怕，其實很簡單。首先，理清思路：首先第一個頁面，肯定是進來就需要載入的然後通過觸發第一個事件，一般都是select寫聯動，然後通過事件方法將引數（二級需要的條件）傳送給下一個需要用的地方（需要展示的地方）上程式碼：注意$

layui之多級聯動和搜尋實現

先看看效果，這裡實現的是城市聯動的效果：前端部分，用的是layui框架先看看頁面程式碼： <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin">

JavaScript中省市二級聯動建立方法

大家好，我是今天的博主，<一個想做全棧的鹹魚> 今天和大家一起學習一下JavaScript中省市二級聯動建立方法分析: 1、使用（onchange）事件，繫結一個函式 2、建立一個二維陣列來儲存省份和城市，陣列分別來存放省份和城市 3、來獲取使用者選擇的省

動手封裝一個React Native多級聯動

背景肯定是最近有一個專案，需要一個二級聯動功能了！本來想封裝完整之後，放在github上面賺星星，但發現市面上已經有比較成熟的了，為什麼我在開發之前沒去搜索一下（專案很趕進度），淚崩啊，既然已經封裝就來說說過程吧任務開始一. 原型圖或設計圖在封裝一個元件之前

elementUI select多級聯動

需求：編輯時將值回顯，若某一級修改，之後的全部清空實現：通過watch監聽值的改變，若改變，清空後一級的值，並呼叫方法請求下一級的option 問題：編輯賦值的時候也會觸發watch，導致只能講第一級的值回顯，之後的被清空解決：在select上添加回調方法visib

Dev的datagirdview中combobox多級聯動

相關推薦