SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）

做了这么多项目，经常会使用到级联、联动的情况。

如：省、市、县、区。一级分类、二级分类、三级分类。仓库、货位。

方式：有表单需要做级联的，还是表格行上需要做级联操作的。

实现：实现方法也有很多种方式。有封装好的控件，有用纯js控制的，有用Knockout实现的。还有用服务器端控件实现的。但控制表格级联方法都不太好控制，甚至做不到。

那在SNF快速开发平台上如何实现呢？下面看一下做的几种演示样例：

1、有使用EasyUI+JS控制的方式，有Knockout绑定方式实现的，还有框架特殊末级级联法。如下面弹出这个省、市、区。只要选择区就会自动把市、省进行自动填充上。是不是很方便，我们在选择控件上增加了返回上级信息，同时整行信息也是带回的，这样就非常的灵活方便了。

2、级联时只需选择最后一个，这种处理方式是SNF框架独有功能。比以往级联方式操作更为简单。程序控制也变得简单。

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('省',));

                    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=""  editor="{type: 'lookup', options:{lookupType:'ItemsArea',parentField:'ParentId'}}" formatter="snf.formateItemsArea">省   </th>

                <th field="Shi"    align="left"    width="" formatter="snf.formateItemsArea">市   </th>

                <th field="Qu"     align="left"    width=""  editor="{type: 'lookup', options:{lookupType:'ItemsArea',parentField:'ParentId',onSelectedData:QuSelectedData}}" formatter="snf.formateItemsArea">区/县</th> 

            </tr>

        </thead>

    </table>

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

SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）

SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）的更多相关文章

随机推荐

热门专题