[置顶] Ext.Net 1.x_Ext.Net.GridPanel 模拟CS实现主从表操作

HTML:测试

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TaskCheck.ascx.cs" Inherits="Subcontract.Web.AttendanceInfo.Controls.TaskCheck" %>
<ext:Store runat="server" ID="AtttendabceItemStore">
    <Reader>
        <ext:JsonReader IDProperty="BaseValueID">
            <Fields>
                <ext:RecordField Name="BaseValueID" />
                <ext:RecordField Name="BaseName" />
                <ext:RecordField Name="BaseDetail" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>
<script type="text/javascript">
    //保存选择的考勤项分数
    var AtttendanceItem_Select = function (item) {
        var val = item.store.getById(item.value).data.BaseDetail;
        TaskCheck1_hidScore.setValue(val);
    }
    //验证
    var isValid = function () {
        setAllowBlank(false);
        return TaskCheck1_FormPanel4.isValid();
    }

    //设置验证状态
    var setAllowBlank = function (flag) {
        TaskCheck1_AtttendanceItem.allowBlank = flag;
        TaskCheck1_AttendanceNumber.allowBlank = flag;
    }
    //添加新数据
    var btnAdd_Click = function (buttom) {
        if (isValid()) {
            //取消验证，保存整个页面的时候不能验证
            setAllowBlank(true);
            var store = TaskCheck1_grid.getStore();
            //修改时先移除需要修改的行
            if (buttom.getText() == '完成修改') {
                store.removeAt(TaskCheck1_hidIndex.getValue());
            }
            //如grid里面已经有当前选择的专业则不能添加
            var flag = new Array();
            var Records = store.getRange(); //获取grid中所有的行
            for (var i = 0; i < Records.length; i++) {
                if (Records[i].data.AtttendanceItemID == TaskCheck1_AtttendanceItem.getValue()) {
                    flag[i] = false;
                } else {
                    flag[i] = true;
                }
            }
            if (flag.indexOf(false) == -1) {
                var TopicRecord = Ext.data.Record.create([
                { name: 'AtttendanceItem', type: 'string' },
                { name: 'AtttendanceItemID', type: 'string' },
                { name: 'AttendanceNumber', type: 'string' },
                { name: 'Score', type: 'string' }
            ]);
                var myNewRecord = new TopicRecord({
                    AtttendanceItem: TaskCheck1_AtttendanceItem.getText(),
                    AtttendanceItemID: TaskCheck1_AtttendanceItem.getValue(),
                    AttendanceNumber: TaskCheck1_AttendanceNumber.getValue(),
                    Score: getScore(TaskCheck1_AtttendanceItem.getValue(), TaskCheck1_AttendanceNumber.getValue())
                });
                store.add(myNewRecord); //向Store中添加一行数据

                //清空数据
                TaskCheck1_AtttendanceItem.reset();
                TaskCheck1_AttendanceNumber.reset();
                buttom.setText('添加');
            }
            else {
                Ext.MessageBox.show({
                    title: '提示',
                    msg: '不能添加重复的出勤项！',
                    icon: Ext.MessageBox.WARNING,
                    buttons: Ext.MessageBox.OK,
                    fn: function () {
                        TaskCheck1_AtttendanceItem.reset();
                    }
                });
            }
        }
    }
    //计算分数
    var getScore = function (id, num) {
        var DiseaseLevelID = TaskCheck1_hidDiseaseLevelID.getValue();
        var PersonalLeaveID = TaskCheck1_hidPersonalLeaveID.getValue();
        if (id == DiseaseLevelID) {
            return (num - 5) < 0 ? 0 : (num - 5) * TaskCheck1_hidScore.getValue();
        } else if (id == PersonalLeaveID) {

            return (num - 10) < 0 ? 0 : (num - 10) * TaskCheck1_hidScore.getValue();
        } else {
            return num * TaskCheck1_hidScore.getValue();
        }
    }

    var grid_Command = function (cmd, record, rowIndex) {
        if (cmd === 'update') {
            //改变按钮text
            TaskCheck1_btnAdd.setText('完成修改');
            //保存rowindex
            TaskCheck1_hidIndex.setValue(rowIndex);
            //重新选中combox
            TaskCheck1_AtttendanceItem.setValue(record.data.AtttendanceItemID);
            TaskCheck1_AttendanceNumber.setValue(record.data.AttendanceNumber);
            var obj = TaskCheck1_AtttendabceItemStore.getById(record.data.AtttendanceItemID);
            TaskCheck1_hidScore.setValue(obj.data.BaseDetail);
        }
        if (cmd == "delete") {
            if (TaskCheck1_btnAdd.getText() == '完成修改') {
                Ext.MessageBox.show({
                    title: '提示',
                    msg: '修改时不能删除数据！请先完成修改。',
                    icon: Ext.MessageBox.WARNING,
                    buttons: Ext.MessageBox.OK
                });
            } else {
                Ext.MessageBox.confirm("提示", "确定要删除吗？", function (e) {
                    if (e == "yes") {
                        record.store.remove(record);
                    }
                });
            }
        }
    }

    var btnSaveClick = function () {
        //设置不验证
        setAllowBlank(true);
        if (TaskCheck1_btnAdd.getText() == '完成修改') {
            Ext.MessageBox.show({
                title: '提示',
                msg: '考勤信息未完成修改！请先完成修改。',
                icon: Ext.MessageBox.WARNING,
                buttons: Ext.MessageBox.OK
            }); return false;
        }
        if (!TaskCheck1_FormPanel1.isValid()) {
            return false;
        }
        else {
            return true;
        }
    }
    var PreToolbar = function (grid, toolbar, rowIndex, record) {
        var firstButton = toolbar.items.get(0);
        var secButton = toolbar.items.get(1);
        if (TaskCheck1_hidIsReadOnly.getValue() == "1") {
            firstButton.setVisible(false);
            secButton.setVisible(false);
        }
    };       
</script>
<ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="true" Padding="0"
    AnchorHorizontal="100%" AnchorVertical="100%" Width="960" Layout="FormLayout">
    <Items>
        <ext:FormPanel ID="FormPanel3" runat="server" Header="false" Border="true" Padding="0"
            Width="960" Layout="FormLayout" AnchorHorizontal="100%">
            <Items>
                <ext:Panel ID="Panel5" runat="server" Header="false" Padding="0" Border="false" Layout="ColumnLayout"
                    Height="32" AnchorHorizontal="100%">
                    <Items>
                        <ext:Panel ID="Panel1" runat="server" Header="false" Border="false" ColumnWidth=".3"
                            Layout="FormLayout">
                            <Items>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="Panel2" runat="server" Header="false" Padding="8" Border="false" Layout="FormLayout"
                            ColumnWidth=".5">
                            <Items>
                                <ext:Label runat="server" ID="Title" Text="出勤工单" StyleSpec="font-size: 18px; font-weight: bold;">
                                </ext:Label>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel6" runat="server" Border="false" Header="false" Padding="4" Layout="ColumnLayout"
                    Height="34">
                    <Items>
                        <ext:Panel ID="Panel7" runat="server" Border="false" Header="false" ColumnWidth=".76">
                            <Items>
                                <ext:DisplayField ID="DisplayField4" runat="server" Text=" ">
                                </ext:DisplayField>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="Panel8" runat="server" Border="false" Header="false" ColumnWidth=".2"
                            LabelWidth="60">
                            <Items>
                                <ext:DisplayField runat="server" ID="TaskCode" FieldLabel="工单编号" Width="190">
                                </ext:DisplayField>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
        <ext:FormPanel ID="FormPanel2" runat="server" Header="false" Border="true" Padding="4"
            Width="960" Layout="FormLayout" AnchorHorizontal="100%" LabelWidth="120">
            <Items>
                <ext:Panel ID="Panel3" runat="server" Border="false" Header="false" Layout="ColumnLayout"
                    LabelWidth="80" Height="25">
                    <Items>
                        <ext:Panel ID="Panel9" runat="server" Header="false" Border="false" Layout="FormLayout"
                            ColumnWidth=".3">
                            <Items>
                                <ext:DisplayField runat="server" ID="TaskStartDate" FieldLabel="工单启动时间">
                                </ext:DisplayField>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="Panel4" runat="server" Header="false" Border="false" Layout="FormLayout"
                            ColumnWidth=".7">
                            <Items>
                                <ext:DisplayField runat="server" ID="PartyUser" FieldLabel="工单当事人">
                                </ext:DisplayField>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
        <ext:FormPanel ID="FormPanel4" runat="server" Header="false" Border="false" Padding="0"
            Width="960" Layout="FormLayout" AnchorHorizontal="100%" AutoHeight="true">
            <Items>
                <ext:Panel ID="Panel10" runat="server" Border="true" Header="false" Layout="FormLayout"
                    AutoHeight="true" AnchorHorizontal="100%" AnchorVertical="100%" LabelWidth="70"
                    Padding="4">
                    <Items>
                        <ext:Panel ID="Panel14" runat="server" Header="false" Border="false" Layout="ColumnLayout"
                            Height="26">
                            <Items>
                                <ext:Panel ID="Panel15" runat="server" Header="false" Border="false" Layout="FormLayout"
                                    LabelWidth="50" ColumnWidth=".3">
                                    <Items>
                                        <ext:ComboBox runat="server" ID="AtttendanceItem" DisplayField="BaseName" StoreID="AtttendabceItemStore"
                                            FieldLabel="考勤项" ValueField="BaseValueID" EmptyText="请选择考勤项" Editable="false">
                                            <Listeners>
                                                <Select Fn="AtttendanceItem_Select" />
                                                <Change Fn="AtttendanceItem_Select" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="Panel16" runat="server" Header="false" Border="false" Layout="FormLayout"
                                    ColumnWidth=".4">
                                    <Items>
                                        <ext:NumberField runat="server" ID="AttendanceNumber" FieldLabel="考核数量" AllowDecimals="false">
                                        </ext:NumberField>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="Panel18" runat="server" Header="false" Border="false" Layout="FormLayout"
                                    ColumnWidth=".3">
                                    <Items>
                                        <ext:Button runat="server" ID="btnAdd" Text="添加" Icon="Disk" StandOut="true" IconCls="aa">
                                            <Listeners>
                                                <Click Fn="btnAdd_Click" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                        <ext:GridPanel ID="grid" runat="server" Header="false" Border="true" Margins="5 5 5 5"
                            AutoExpandColumn="toolbar" AnchorHorizontal="98%" Height="150" Icon="UserSuit"
                            TrackMouseOver="true" StripeRows="true" Selectable="true" Shadow="Sides">
                            <Store>
                                <ext:Store runat="server" ID="DataStore" OnRefreshData="DataStore_Refresh" DirtyWarningText="您有未提交的更改。确定要重新加载数据？"
                                    DirtyWarningTitle="提示">
                                    <Reader>
                                        <ext:JsonReader IDProperty="DetailsID">
                                            <Fields>
                                                <ext:RecordField Name="AtttendanceItem" />
                                                <ext:RecordField Name="DetailsID" />
                                                <ext:RecordField Name="AtttendanceItemID" />
                                                <ext:RecordField Name="AttendanceNumber" />
                                                <ext:RecordField Name="Score" />
                                            </Fields>
                                        </ext:JsonReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Command Fn="grid_Command" />
                            </Listeners>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:RowNumbererColumn />
                                    <ext:Column Header="考勤项" DataIndex="AtttendanceItem" Width="250">
                                    </ext:Column>
                                    <ext:Column Header="考核数量" DataIndex="AttendanceNumber">
                                    </ext:Column>
                                    <ext:Column Header="考核扣分" DataIndex="Score">
                                    </ext:Column>
                                    <ext:CommandColumn ColumnID="toolbar">
                                        <PrepareToolbar Fn="PreToolbar" />
                                        <Commands>
                                            <ext:GridCommand CommandName="update" Icon="PageEdit" Text="修改">
                                            </ext:GridCommand>
                                            <ext:GridCommand CommandName="delete" Icon="Delete" Text="删除">
                                            </ext:GridCommand>
                                        </Commands>
                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <LoadMask ShowMask="true" />
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                            </SelectionModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
        <ext:FormPanel ID="FormPanel5" runat="server" Header="false" Border="false" Padding="0"
            Width="960" Layout="FormLayout" AnchorHorizontal="100%" AutoHeight="true">
            <Items>
                <ext:Panel ID="Panel19" runat="server" Border="true" Header="false" Layout="FormLayout"
                    AutoHeight="true" AnchorHorizontal="100%" AnchorVertical="100%" LabelWidth="100"
                    Padding="4">
                    <Items>
                        <ext:DisplayField runat="server" ID="dfAttendanceDesc" FieldLabel="出勤情况描述" Hidden="true"
                            AnchorHorizontal="98%">
                        </ext:DisplayField>
                        <ext:TextArea runat="server" ID="AttendanceDesc" FieldLabel="出勤情况描述" MaxLength="4000"
                            AnchorHorizontal="98%" Height="100">
                        </ext:TextArea>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
        <ext:FormPanel ID="formSign" runat="server" Header="false" Border="true" Padding="4"
            Width="960" Layout="ColumnLayout" Height="32" AnchorHorizontal="100%">
            <Items>
                <ext:Panel ID="Panel20" runat="server" Border="false" Header="false" Layout="FormLayout"
                    Padding="4" ColumnWidth=".3">
                    <Items>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel21" runat="server" Border="false" Header="false" Layout="ColumnLayout"
                    ColumnWidth=".4" LabelWidth="90">
                    <Items>
                        <ext:DisplayField runat="server" ID="lblSign" FieldLabel="工单评价人签字" Hidden="true" />
                        <ext:Image ID="imgSign" runat="server" FieldLabel="工单评价人签字" AlternateText="签字确认"
                            ImageUrl="../Content/nosign.GIF">
                            <Listeners>
                                <Click Handler="#{winSign}.show();" />
                            </Listeners>
                        </ext:Image>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel24" runat="server" Border="false" Header="false" Layout="ColumnLayout"
                    ColumnWidth=".3" LabelWidth="35">
                    <Items>
                        <ext:DisplayField runat="server" ID="SignTime" Width="170" FieldLabel="时间" />
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
        <ext:FormPanel ID="formSave" runat="server" Header="false" Border="true" Padding="0"
            Width="960" Layout="ColumnLayout" Height="32" AnchorHorizontal="100%">
            <Items>
                <ext:Panel ID="Panel25" runat="server" Border="false" Header="false" Layout="FormLayout"
                    Padding="4" ColumnWidth=".70">
                    <Items>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel17" runat="server" Border="false" Header="false" Layout="FormLayout"
                    Padding="4" ColumnWidth=".3" LabelWidth="35">
                    <Items>
                        <ext:Button ID="btnSave" runat="server" StandOut="true" Text="提交" Icon="Disk">
                            <DirectEvents>
                                <Click OnEvent="btnSave_Click" Failure="Ext.MessageBox.alert('提示', '数据提交失败');" Before="return btnSaveClick();">
                                    <Confirmation ConfirmRequest="true" Message="确定要提交数据吗?" Title="提示" />
                                    <EventMask ShowMask="true" Msg="数据提交中..." />
                                    <ExtraParams>
                                        <ext:Parameter Name="grid" Value="Ext.encode(#{grid}.getRowsValues({selectedOnly : false}))"
                                            Mode="Raw" />
                                    </ExtraParams>
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
    </Items>
</ext:FormPanel>
<ext:Hidden runat="server" ID="hidSign">
</ext:Hidden>
<ext:Hidden runat="server" ID="hidSerialNumber">
</ext:Hidden>
<ext:Hidden runat="server" ID="hidTaskID">
</ext:Hidden>
<ext:Hidden runat="server" ID="hidIndex">
</ext:Hidden>
<ext:Hidden runat="server" ID="hidScore">
</ext:Hidden>
<!--病假id-->
<ext:Hidden runat="server" ID="hidDiseaseLevelID">
</ext:Hidden>
<!--事假id-->
<ext:Hidden runat="server" ID="hidPersonalLeaveID">
</ext:Hidden>
<ext:Hidden runat="server" ID="hidIsReadOnly">
</ext:Hidden>
<ext:Window ID="winSign" runat="server" Closable="true" Resizable="false" Height="150"
    Icon="Lock" Title="签字确认" Draggable="false" Width="350" Modal="true" Padding="15"
    Hidden="true" Layout="Form">
    <Items>
        <ext:TextField ID="UserName" runat="server" FieldLabel="用户名" Width="200" ReadOnly="false" />
        <ext:TextField ID="Password" InputType="Password" runat="server" FieldLabel="密码"
            Width="200" />
    </Items>
    <Buttons>
        <ext:Button ID="Button1" runat="server" Text="确定" Icon="Accept">
            <DirectEvents>
                <Click OnEvent="btnSign_User">
                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="winSign" />
                </Click>
            </DirectEvents>
        </ext:Button>
        <ext:Button ID="Button2" runat="server" Text="取消" Icon="Cancel">
            <Listeners>
                <Click Handler="#{winSign}.hide();" />
            </Listeners>
        </ext:Button>
    </Buttons>
</ext:Window>

后台：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            string strsql = "select top 2 name,id as line from users";
            DABaseAccess db = new DABaseAccess();

            DataTable dt = new DataTable();
            dt = db.Query(strsql);
            
            Store store = this.grid.GetStore();
            store.DataSource = dt;
            store.DataBind();
        } 

    }
    public void btnSave_Click(object sender, DirectEventArgs e) 
    {
        string gpOfferPlanJson = e.ExtraParams["grid"];
        Dictionary<string, string>[] dicUser = JSON.Deserialize<Dictionary<string, string>[]>(gpOfferPlanJson);
        List<DesignerPlan> designerPlanList = new List<DesignerPlan>();
        DesignerPlan designerPlan;

        foreach (var item in dicUser)
        {

            designerPlan = new DesignerPlan();
            designerPlan.Name = item["name"];
            designerPlanList.Add(designerPlan);

        }
    }
    public class DesignerPlan 
    {
        private string name = string.Empty;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }

重庆Mr Lee提供