天天看點
傳回

SNF快速開發平台MVC-各種級聯綁定方式，示範樣例程式（包含表單和表格控件）...

做了這麼多項目，經常會使用到級聯、關聯的情況。

如：省、市、縣、區。一級分類、二級分類、三級分類。倉庫、貨位。

方式：有表單需要做級聯的，還是表格行上需要做級聯操作的。

實作：實作方法也有很多種方式。有封裝好的控件，有用純js控制的，有用Knockout實作的。還有用伺服器端控件實作的。但控制表格級聯方法都不太好控制，甚至做不到。

那在SNF快速開發平台上如何實作呢？下面看一下做的幾種示範樣例：

1、有使用EasyUI+JS控制的方式，有Knockout綁定方式實作的，還有架構特殊末級級聯法。如下面彈出這個省、市、區。隻要選擇區就會自動把市、省進行自動填充上。是不是很友善，我們在選擇控件上增加了傳回上級資訊，同時整行資訊也是帶回的，這樣就非常的靈活友善了。

SNF快速開發平台MVC-各種級聯綁定方式，示範樣例程式（包含表單和表格控件）...

 2、級聯時隻需選擇最後一個，這種處理方式是SNF架構獨有功能。比以往級聯方式操作更為簡單。程式控制也變得簡單。

SNF快速開發平台MVC-各種級聯綁定方式，示範樣例程式（包含表單和表格控件）...

3、具體的實作代碼如下：

<script type="text/javascript">

            var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));  

            var viewModel =function(data){
                var self = this;
                snf.viewModel.listadmin.apply(this, arguments); 

                this.IsLookupReadOnly = ko.observable(true);//Lookup二級隻讀處理

                //窗體加載事件
                $(window).load(function () {

                    //01.用最原始的方法進行級聯綁定資料源
                    $('#QueryDropDownSingle').combobox({    
                        onSelect: function(rec){    
                            //alert(rec.value);
                            //資料送出
                            snf.ajax({
                                url: '/api/DEMO/DemoCascade/GetCascade/'+ rec.value,
                                //data: ko.toJSON(row),
                                success: function (d) { 
                                    //self.queryForm.QueryDropDownSingle.combobox('loadData',ko.toJS(d));  
                                    self.queryForm.QueryDropDownSingle2("");
                                    $('#QueryDropDownSingle2').combobox('loadData',ko.toJS(d));                                     
                                }
                            });
                        } 
                    });  
                    //02.ko
                    self.ProviceOptions(self.ChangeOptions('省',0));
                    if (self.queryForm.ProvinceId()) {
                        self.CityOptions(self.ChangeOptions('市',self.queryForm.ProvinceId()));
                    }
                    if (self.queryForm.CityId()) {
                        self.CountyOptions(self.ChangeOptions('區',self.queryForm.CityId()));
                    } 
                    //03.Lookup 
                    //lookup選擇事件處理 
                    $('#lookup1').lookup({
                        //相當于html >> select >> onChange事件  
                        onChange: function (newValue, oldValue) {
                            self.queryForm.lookup1(newValue);
                            //$("#lookup2").lookup("setValue","");
                            self.queryForm.lookup2("");
                            if (newValue == "") {
                                self.IsLookupReadOnly(true); 
                            }else {
                                self.IsLookupReadOnly(false); 
                                var rowData = $("#lookup1").lookup("getSelectedData");
                                if (rowData) {
                                    $('#lookup2').lookup({queryParams : {ParentId : rowData.row.Id} }); 
                                }
                                //alert(rowData.row.Id);
                               
                            }
                           
                        }
                    });
                    //04.Lookup的ko綁定方式,queryForm.lookup2
                    self.queryForm.lookupko1.subscribe(function (newValue){
                        self.queryForm.lookupko2("");
                        //alert(self.queryForm.lookupko1());//alert(rowData.row.Id);
                        var rowData = $("#lookup2").lookup("getSelectedData");
                        $('#lookupko2').lookup({queryParams : {ParentId : rowData.row.Id} }); 
                    });

                    //05.取前節點值
                    $('#lookupcascade3').lookup({
                        //相當于html >> select >> onChange事件  
                        onChange: function (newValue, oldValue) {
                            self.queryForm.lookupcascade3(newValue); 
                            
                            if (newValue == "") { 
                            }else {
                                 
                                var rowData = $("#lookupcascade3").lookup("getSelectedData");
                                var parent = rowData.target.treegrid('getParent', rowData.id);
                                self.queryForm.lookupcascade2(parent.value);
                                var parentParent = rowData.target.treegrid('getParent', parent.Id);
                                if (parentParent) {
                                    self.queryForm.lookupcascade1(parentParent.value);
                                }
                               
                            }
                           
                        }
                    });

                }); 
               
                //02.ko 綁定方式 三級級聯
                self.ProviceOptions=ko.observableArray();
                self.CityOptions=ko.observableArray();
                self.CountyOptions=ko.observableArray();
                this.ChangeOptions=function(name,parentid){
                    var options=null;
                    snf.ajax({
                        async:false,
                        type: 'get',
                        url: '/api/DEMO/DemoCascade/GetAreaCodeDropDown/'+name +"$"+ parentid,
                        success: function (d) {
                            options =d;
                        },
                        error: function (e) {
                            snf.message('error', e.responseText);
                        }
                    });
                    return options;
                }
                //this.ChangeComputed = ko.computed(function () {
                //    self.ProviceOptions(self.ChangeOptions('省',0));
                //    //self.CityOptions(self.ChangeOptions(self.queryForm.ProvinceId()));
                //    //self.CountyOptions(self.ChangeOptions(self.queryForm.CityId()));
                //});
                this.queryForm.ProvinceId.subscribe(function (newValue){
                    self.CityOptions(self.ChangeOptions('市',newValue))
                    self.queryForm.CityId("");
                    self.queryForm.CountyId("");
                });
                this.queryForm.CityId.subscribe(function (newValue){                    
                    self.CountyOptions(self.ChangeOptions('區',newValue))
                    self.queryForm.CountyId("");
                });

                this.searchClick = function(){ 
                    alert(self.queryForm.lookupko2());
                    var a = $('#lookupko2').lookup('getSelectedData').text;

                    alert(a);
                }

                this.addRowClick = function () {      
          
                    self.gridEdit.addnew();
                    //取多選使用者
                    //alert($('#userlookup').combobox('getValues'))
                    //window.location.reload();
                };
               

                
            }   

            using(['combobox','datebox','datetimebox','numberbox'],easyuifix.datagrid_editor_extend);
              
            ko.bindingViewModel(new viewModel(data));
            snf.formateItemsArea = utils.fnValueToText(data.dataSource.ItemsArea);
            //function QuSelectedData(rtnValue){
            function QuSelectedData(rtnValue){
                //alert(rtnValue);
                var row = $("#grid").datagrid('getSelected');
                if (!row) return snf.message('warning', self.resx.noneSelect);
                var index = $("#grid").datagrid('getRowIndex', row);  
                //取上一級的值和大上一級的值 
                var sheng,shi;
                var parent = rtnValue.target.treegrid('getParent', rtnValue.id);
                if (parent) {
                    shi = parent.value;
                }
                var parentParent = rtnValue.target.treegrid('getParent', parent.Id);
                if (parentParent) {
                    sheng = parentParent.value ;
                }
               

                //--------------------------------------------------------------------
                ////方法1 - 此處理方式缺點是,修改的列需要有editor
                //var Sheng=$('#grid').datagrid('getEditor',{ index: index, field: 'Sheng' }).target;
                ////Sheng.val(sheng);//主要看editor裡的控件修改值是用什麼方法是否有val
                //Sheng.lookup("setValue",sheng);

                //var Shi=$('#grid').datagrid('getEditor',{ index: index, field: 'Shi' }).target; 
                //Shi.lookup("setValue",shi);
               
               
                //方法2 這種處理,目前會報一個錯誤但不影響使用
                $('#grid').datagrid('endEdit', index);
                $('#grid').datagrid('updateRow', {
                    index: index,
                    row: {
                        Sheng : sheng,
                        Shi : shi ,
                        Qu : rtnValue.value
                    }
                }); 
               $('#grid').datagrid('beginEdit', index);

            }
        </script>
}
     
        <div id="condition" class="container_12" style="margin:5px;position:relative;vertical-align:text-bottom;" data-bind="inputwidth:0.9">
         
            <div class="grid_1 lbl">下拉第一級</div>
            <div class="grid_2 val">
                <input id="QueryDropDownSingle" type="text" data-bind="comboboxValue:queryForm.QueryDropDownSingle,datasource:data.dataSource.QueryDropDownSingle"   class="z-txt easyui-combobox"  data-options="showblank:true"/>
            </div>
            <div class="grid_1 lbl">下拉第二級</div>
            <div class="grid_2 val">
                <input id="QueryDropDownSingle2" type="text" data-bind="comboboxValue:queryForm.QueryDropDownSingle2,datasource:data.dataSource.QueryDropDownSingle2"   class="z-txt easyui-combobox"  data-options="showblank:true"/>
            </div>
            <div class="clear"></div>

            <div class="grid_1 lbl">ko省主鍵</div>
            <div class="grid_2 val">
                <input id="ProvinceId" type="text" data-bind="comboboxValue:queryForm.ProvinceId,datasource:ProviceOptions" class="z-txt easyui-combobox" data-options="showblank:true" />
            </div>
            <div class="grid_1 lbl required">市主鍵</div>
            <div class="grid_2 val">
                <input id="CityId" type="text" data-bind="comboboxValue:queryForm.CityId,datasource:CityOptions" class="z-txt easyui-combobox" data-options="showblank:true ,required:true" />
            </div>
             <div class="grid_1 lbl required">區縣主鍵</div>
            <div class="grid_2 val">
                <input id="CountyId" type="text" data-bind="comboboxValue:queryForm.CountyId,datasource:CountyOptions" class="z-txt easyui-combobox" data-options="showblank:true ,required:true" />
            </div> 
            <div class="clear"></div>

            <div class="grid_1 lbl">Lookup第一級</div>
            <div class="grid_2 val">
                 <input id="lookup1"   data-bind="lookupValue:queryForm.lookup1" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest',queryParams:{ParentId:'null'}"/>
            </div>
            <div class="grid_1 lbl">下拉第二級</div>
            <div class="grid_2 val">
                <input id="lookup2"   data-bind="lookupValue:queryForm.lookup2,lookupReadOnly:IsLookupReadOnly" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest'"/>
            </div>
            <div class="clear"></div>
           
            <div class="grid_1 lbl">ko-Lookup第一級</div>
            <div class="grid_2 val">
                 <input id="lookupko1"   data-bind="lookupValue:queryForm.lookupko1" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest',queryParams:{ParentId:'null'}"/>
            </div>
            <div class="grid_1 lbl">ko-下拉第二級</div>
            <div class="grid_2 val">
                <input id="lookupko2"   data-bind="lookupValue:queryForm.lookupko2,lookupReadOnly:IsLookupReadOnly" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest'"/>
            </div>
            <div class="clear"></div>

            <div class="grid_1 lbl">級聯一級</div>
            <div class="grid_2 val">
                 <input id="lookupcascade1"   data-bind="lookupValue:queryForm.lookupcascade1,lookupReadOnly:true" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest'"/>
            </div>
            <div class="grid_1 lbl">級聯二級</div>
            <div class="grid_2 val">
                <input id="lookupcascade2"   data-bind="lookupValue:queryForm.lookupcascade2,lookupReadOnly:true" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest'"/>
            </div>
            <div class="grid_1 lbl">級聯三級</div>
            <div class="grid_2 val">
                <input id="lookupcascade3"   data-bind="lookupValue:queryForm.lookupcascade3" type="text" class="z-txt easyui-lookup" data-options="lookupType:'ItemsTreeTest',parentField:'ParentId'"/>
            </div>
            <div class="clear"></div>

            
            <a id="a_search" href="#" class="buttonHuge button-blue" style="margin:0 15px;" data-bind="click:searchClick">查詢</a> 
            <a id="a_addRowClick" href="#" class="buttonHuge button-blue" style="margin:0 15px;" data-bind="click:addRowClick">增加行</a>
            <a id="a_saveClick" href="#" class="buttonHuge button-blue" style="margin:0 15px;" data-bind="click:saveClick">儲存行</a>
         @*   <div class="prefix_9" style="position:absolute;top:5px;height:0;">  
                <a id="a_search" href="#" class="buttonHuge button-blue" style="margin:0 15px;" data-bind="click:searchClick">查詢</a> 
                <a id="a_reset" href="#" class="buttonHuge button-blue" data-bind="click:clearClick">清空</a> 
            </div>*@
        </div>


   <table id="grid" data-bind="datagrid:grid" style="display:none;">
        <thead>
            <tr>    
                <th field="Sheng"  align="left"    width="120"  editor="{type: 'lookup', options:{lookupType:'ItemsArea',parentField:'ParentId'}}" formatter="snf.formateItemsArea">省   </th>  
                <th field="Shi"    align="left"    width="100" formatter="snf.formateItemsArea">市   </th>    
                <th field="Qu"     align="left"    width="80"  editor="{type: 'lookup', options:{lookupType:'ItemsArea',parentField:'ParentId',onSelectedData:QuSelectedData}}" formatter="snf.formateItemsArea">區/縣</th> 
                 
            </tr>
        </thead>
    </table>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

作者： 王金鬥
出處： http://www.cnblogs.com/spring_wang/
Email: [email protected]
QQ：903639067 
QQ群：322581894

 這個系列教程文檔，歡迎轉載：

SNF快速開發平台WinForm-CS甘特圖http://www.cnblogs.com/spring_wang/p/7418423.html

SNF快速開發平台MVC-稽核流，稽核完成後會給下一個稽核人發郵件，下一個稽核人可以不登入系統，在郵件裡進行稽核處理http://www.cnblogs.com/spring_wang/p/7418402.html

SNF快速開發平台MVC-名片管理(實際名片樣式) http://www.cnblogs.com/spring_wang/p/7416540.html

SNF快速開發平台MVC-表格單元格合并元件http://www.cnblogs.com/spring_wang/p/7416368.html

SNF快速開發平台MVC-單據狀态水印http://www.cnblogs.com/spring_wang/p/7416349.html

SNF快速開發平台MVC-瀑布式分頁元件http://www.cnblogs.com/spring_wang/p/7411116.html

SNF快速開發平台MVC-進階查詢元件http://www.cnblogs.com/spring_wang/p/7411113.html

SNF快速開發平台MVC-自由排序元件http://www.cnblogs.com/spring_wang/p/7411090.html

SNF快速開發平台MVC-各種級聯綁定方式，示範樣例程式（包含表單和表格控件）http://www.cnblogs.com/spring_wang/p/7405371.html

SNF快速開發平台MVC-內建了百度開源項目echarshttp://www.cnblogs.com/spring_wang/p/7405171.html

SNF快速開發平台WinForm-平闆拍照及掃描二維碼功能http://www.cnblogs.com/spring_wang/p/7404600.html

SNF快速開發平台WinForm規則引擎整體介紹及使用http://www.cnblogs.com/spring_wang/p/7404182.html

SNF快速開發平台WinForm-Grid表格控件大全http://www.cnblogs.com/spring_wang/p/7403881.html

SNF快速開發平台WinForm-表單驗證控件-通用http://www.cnblogs.com/spring_wang/p/7403750.html

SNF.CodeGenerator-更新生成BS頁面代碼-支援視圖-資料庫配置-快速開發者的利器http://www.cnblogs.com/spring_wang/p/7402612.html

SNF快速開發平台WinForm-稽核流使用方法樣例http://www.cnblogs.com/spring_wang/p/7374176.html

SNF快速開發平台WinForm-EasyQuery統計分析-效果-非常牛逼的報表查詢工具http://www.cnblogs.com/spring_wang/p/7366059.html

SNF快速開發平台MVC-Grid++內建列印http://www.cnblogs.com/spring_wang/p/7365567.html

SNF快速開發平台MVC-富文本控件內建了百度開源項目editorhttp://www.cnblogs.com/spring_wang/p/7365265.html

C#按回車Enter使輸入焦點自動跳到下一個TextBox的方法收集http://www.cnblogs.com/spring_wang/p/7216538.html

關于系統前端開發的那些事http://www.cnblogs.com/spring_wang/p/7092721.html

WebApi和MVC-controller層接收的json字元串的取值方法和調用背景服務方法http://www.cnblogs.com/spring_wang/p/6740314.html

SNF快速開發平台--規則引擎在程式當中如何調用http://www.cnblogs.com/spring_wang/p/6740490.html

SNF快速開發平台--規則引擎介紹和使用文檔http://www.cnblogs.com/spring_wang/p/6740445.html

SNF快速開發平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右鍵菜單http://www.cnblogs.com/spring_wang/p/6740338.html

SNF快速開發平台--多組織+多平台+多系統處理方案http://www.cnblogs.com/spring_wang/p/6734654.html

SNF快速開發平台MVC-EasyUI3.9之-Session過期處理和頁面請求篩選http://www.cnblogs.com/spring_wang/p/6733975.html

SNF快速開發平台MVC-EasyUI3.9之-WebApi身份驗證問題解決方案http://www.cnblogs.com/spring_wang/p/6733814.html

SNF快速開發平台MVC-EasyUI3.9之-WebApi跨域處理方案http://www.cnblogs.com/spring_wang/p/6733659.html

SNF快速開發平台MVC-EasyUI3.9之-ueditor富文本編輯在 asp.net MVC下使用步驟http://www.cnblogs.com/spring_wang/p/6710351.html

SNF開發平台WinForm之十五-時間軸控件使用-http://www.cnblogs.com/spring_wang/p/6285393.html

SNF開發平台WinForm之十四-站内發送系統資訊http://www.cnblogs.com/spring_wang/p/6140031.html

SNF開發平台WinForm之十三-單獨從伺服器上擷取PDF檔案進行顯示http://www.cnblogs.com/spring_wang/p/6140025.html

SNF開發平台WinForm之十二-發送手機短信功能調用http://www.cnblogs.com/spring_wang/p/6139829.html

SNF開發平台WinForm之十一-程式打包http://www.cnblogs.com/spring_wang/p/6139827.html

SNF開發平台WinForm之十-Excel導入http://www.cnblogs.com/spring_wang/p/6128604.html

SNF開發平台WinForm之九-代碼生成器使用說明http://www.cnblogs.com/spring_wang/p/6128595.html

SNF開發平台WinForm之八-自動更新程式部署使用說明http://www.cnblogs.com/spring_wang/p/6128570.html

SNF開發平台WinForm之七-單據列印和使用說明http://www.cnblogs.com/spring_wang/p/6126016.html

SNF開發平台WinForm之六-上傳下載下傳元件使用http://www.cnblogs.com/spring_wang/p/6125929.html

SNF開發平台WinForm之五-進階查詢使用說明-http://www.cnblogs.com/spring_wang/p/6116640.html

SNF開發平台WinForm之四-開發-主細表管理頁面-http://www.cnblogs.com/spring_wang/p/6116626.html

SNF開發平台WinForm之三-開發-單表選擇控件建立-http://www.cnblogs.com/spring_wang/p/6116592.html

SNF開發平台WinForm之二-開發-單表表單管理頁面-http://www.cnblogs.com/spring_wang/p/6116572.html

SNF開發平台WinForm之一-開發-單表表格編輯管理頁面-http://www.cnblogs.com/spring_wang/p/6116523.html

Winform開發架構之通用Windows攝像頭調用拍照http://www.cnblogs.com/spring_wang/p/6008674.html

Winform開發架構之圖表報表線上設計器2-圖表-SNF.EasyQuery項目--SNF快速開發平台3.3-Spring.Net.Framework

Winform開發架構之圖表報表線上設計器-報表-SNF.EasyQuery項目--SNF快速開發平台3.3-Spring.Net.Framework

Winform開發架構之通用附件管理子產品 --SNF快速開發平台3.3-Spring.Net.Framework

SNFAutoupdater通用自動更新元件V2.0-WinForm

SNF快速開發平台3.2之--.Net可擴充的單據編号生成器-SNF.CodeRule

SNF快速開發平台3.1之--稽核流(3)低調奢華，簡單不凡，執行個體示範-SNF.WorkFlow

SNF快速開發平台3.1之--稽核流(2)流程設計-SNF.WorkFlow功能使用說明

SNF快速開發平台3.1之--稽核流(1)SNF.WorkFlow稽核流簡介

SNF快速開發平台3.0之--完美的代碼生成器SNF.CodeGenerator-快速開發者的利器

基于MVC4+EasyUI的Web開發架構--Spring.Net.FrameworkV3.0總體介紹

SNF快速開發平台3.0之--MVC 列印解決方案

SNF快速開發平台3.0之--檔案批量上傳-統一附件管理器-線上預覽檔案(有網際網路和沒有兩種)

SNF快速開發平台3.0之--asp.net mvc4 強大的導出和不需要上傳檔案的批量導入EXCEL

SNF快速開發平台3.0之MVC通用控件庫展示-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速開發平台3.0之BS頁面展示和九大優點-部分頁面顯示效果-Asp.net+MVC4.0+WebAPI+EasyUI +Knockout

SNF快速開發平台3.0之-界面個性化配置+10種皮膚+7種菜單-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速開發平台3.0之-CS頁面-Asp.net+Spring.Net.Framework

SNF快速開發平台3.0之--系統裡廣播的作用--迅速及時、簡明扼要的把資訊發送給接收者

測試 json c#
上一篇: 2*3鍵盤中斷
下一篇: 單片機C51序列槽接收（中斷）和發送例程

繼續閱讀