当前位置: 澳门新濠3559 > 编程 > 正文

这种效果会很大程度上提高用户体验,页面中引

时间:2019-12-27 17:08来源:编程
文件来自:_cellediting.php应该算是官方代码了。分界面中“编码”列不可编辑,粤语称呼列是可编写制定的。开采一个难题,寻常步入页面包车型大巴时候,搜索关键字,出来结果,编辑

文件来自:_cellediting.php应该算是官方代码了。分界面中“编码”列不可编辑,粤语称呼列是可编写制定的。开采一个难题,寻常步入页面包车型大巴时候,搜索关键字,出来结果,编辑单元格内容,比如改正一下“粤语称呼”列的数码,一切正常。不过意气风发旦当本人点击了下“编码”列的自便一个单元格,搜索框就再也无法输入数据,不过能够收获关节,大器晚成输多少就像同失去主旨的这种感到。要是点击“筛选数据”按键重新加载下datagrid又是一切符合规律了,然后点击“编码”列数据,又是回天无力输出寻觅关键字。查看了datagrid-cellediting.js文件,不晓得怎么改善,希望高手扶植解答下。以下是此文件的始末:

 

三.然后介绍一下哪些使用
在网页的<head></head>标签中,参预上边两句:

澳门新濠3559 1

校订的调节器部分把在此以前台湾电视中心图获得的参数id贮存到ViewData中,传到到编辑子窗口,异步加载强类型部分视图的时候再用到这一个id。

多少提交只须求多少个数据
1.type 输入框的name
2.q 查找关键字(私下认可UTF-8编码)
你下载的裁减包中,已经富含php和ColdFusion示例,当然这一个框架能够适用于全数的编程语言,无平台节制。后台数据输出便是一条 Javascript 语句。后生可畏维数组这样写:
new Array(”val1″, “val2″, “val3″);

系统采纳的easyui版本:jquery-easyui-1.8.1个中一个页面,分界面如下:便是一个人展览示付加物列表的分界面,用了datagrid,然后有三个搜索框,用的easyui-searchbox,页面中引进了datagrid的单元格编辑js文件

澳门新濠3559 2

二.上面来介绍一下怎么设置
你只要求复制SuggestFramework.js到您的服务器,然后自定义提醒意义的css样式,达成性情的搜寻指示。
而css样式文件,供给您协和做好,何况加入到每贰个页面。
增补:SuggestFramework.js已经试用Dojo ShrinkSafe进行压缩,具体请看

scripttype="text/javascript"src="/Scripts/datagrid-cellediting.js?r=3"/script

澳门新濠3559,  修改

  1. 4.delay 询问延时,单位为纳秒。相当低的延时会赢得越来越快的影响,但会加深服务器担负。可选,默感到1000(1秒)。
    5.heading 假设设为 true ,第八个数组值将作为不可选取项(标题栏)。当有两列或两列以上数量时优质量管理用。可选,默许为false.
(function($){$.extend($.fn.datagrid.defaults,{clickToEdit:true,dblclickToEdit:false,navHandler:{'37':function(e){varopts=$(this).datagrid('options');returnnavHandler.call(this,e,opts.isRtl?'right':'left');},'39':function(e){varopts=$(this).datagrid('options');returnnavHandler.call(this,e,opts.isRtl?'left':'right');},'38':function(e){returnnavHandler.call(this,e,'up');},'40':function(e){returnnavHandler.call(this,e,'down');},'13':function(e){returnenterHandler.call(this,e);},'27':function(e){returnescHandler.call(this,e);},'8':function(e){returnclearHandler.call(this,e);},'46':function(e){returnclearHandler.call(this,e);},'keypress':function(e){if(e.metaKey||e.ctrlKey){return;}vardg=$(this);varparam=dg.datagrid('cell');//currentcellinformationif(!param){return;}varinput=dg.datagrid('input',param);if(!input){vartmp=$('span/span');tmp.html(String.fromCharCode(e.which));varc=tmp.text();tmp.remove();if(c){dg.datagrid('editCell',{index:param.index,field:param.field,value:c});returnfalse;}}}},onBeforeCellEdit:function(index,field){},onCellEdit:function(index,field,value){varinput=$(this).datagrid('input',{index:index,field:field});if(input){if(value!=undefined){input.val(value);}}},onSelectCell:function(index,field){},onUnselectCell:function(index,field){}});functionnavHandler(e,dir){vardg=$(this);varparam=dg.datagrid('cell');varinput=dg.datagrid('input',param);if(!input){dg.datagrid('gotoCell',dir);returnfalse;}}functionenterHandler(e){vardg=$(this);varcell=dg.datagrid('cell');if(!cell){return;}varinput=dg.datagrid('input',cell);if(input){if(input[0].tagName.toLowerCase()=='textarea'){return;}endCellEdit(this,true);}else{dg.datagrid('editCell',cell);}returnfalse;}functionescHandler(e){endCellEdit(this,false);returnfalse;}functionclearHandler(e){vardg=$(this);varparam=dg.datagrid('cell');if(!param){return;}varinput=dg.datagrid('input',param);if(!input){dg.datagrid('editCell',{index:param.index,field:param.field,value:''});returnfalse;}}functiongetCurrCell(target){varcell=$(target).datagrid('getPanel').find('td.datagrid-row-selected');if(cell.length){return{index:parseInt(cell.closest('tr.datagrid-row').attr('datagrid-row-index')),field:cell.attr('field')};}else{returnnull;}}functionunselectCell(target,p){varopts=$(target).datagrid('options');varcell=opts.finder.getTr(target,p.index).find('td[field="'+p.field+'"]');cell.removeClass('datagrid-row-selected');opts.onUnselectCell.call(target,p.index,p.field);}functionunselectAllCells(target){varpanel=$(target).datagrid('getPanel');panel.find('td.datagrid-row-selected').removeClass('datagrid-row-selected');}functionselectCell(target,p){varopts=$(target).datagrid('options');if(opts.singleSelect){unselectAllCells(target);}varcell=opts.finder.getTr(target,p.index).find('td[field="'+p.field+'"]');cell.addClass('datagrid-row-selected');opts.onSelectCell.call(target,p.index,p.field);}functiongetSelectedCells(target){varcells=[];varpanel=$(target).datagrid('getPanel');panel.find('td.datagrid-row-selected').each(function(){vartd=$(this);cells.push({index:parseInt(td.closest('tr.datagrid-row').attr('datagrid-row-index')),field:td.attr('field')});});returncells;}functiongotoCell(target,p){vardg=$(target);varopts=dg.datagrid('options');varpanel=dg.datagrid('getPanel').focus();varcparam=dg.datagrid('cell');if(cparam){varinput=dg.datagrid('input',cparam);if(input){input.focus();return;}}if(typeofp=='object'){_go(p);return;}varcell=panel.find('td.datagrid-row-selected');if(!cell){return;}varfields=dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields'));varfield=cell.attr('field');vartr=cell.closest('tr.datagrid-row');varrowIndex=parseInt(tr.attr('datagrid-row-index'));varcolIndex=$.inArray(field,fields);if(p=='up'rowIndex0){rowIndex--;}elseif(p=='down'){if(opts.finder.getRow(target,rowIndex+1)){rowIndex++;}}elseif(p=='left'){vari=colIndex-1;while(i=0){varcol=dg.datagrid('getColumnOption',fields[i]);if(!col.hidden){colIndex=i;break;}i--;}}elseif(p=='right'){vari=colIndex+1;while(i=fields.length-1){varcol=dg.datagrid('getColumnOption',fields[i]);if(!col.hidden){colIndex=i;break;}i++;}}field=fields[colIndex];_go({index:rowIndex,field:field});function_go(p){dg.datagrid('scrollTo',p.index);unselectAllCells(target);selectCell(target,p);vartd=opts.finder.getTr(target,p.index,'body',2).find('td[field="'+p.field+'"]');if(td.length){varbody2=dg.data('datagrid').dc.body2;varleft=td.position().left;if(left0){body2._scrollLeft(body2._scrollLeft()+left*(opts.isRtl?-1:1));}elseif(left+td._outerWidth()body2.width()){body2._scrollLeft(body2._scrollLeft()+(left+td._outerWidth()-body2.width())*(opts.isRtl?-1:1));}}}}//endthecurrentcelleditingfunctionendCellEdit(target,accepted){vardg=$(target);varcell=dg.datagrid('cell');if(cell){varinput=dg.datagrid('input',cell);if(input){if(accepted){if(dg.datagrid('validateRow',cell.index)){dg.datagrid('endEdit',cell.index);dg.datagrid('gotoCell',cell);}else{dg.datagrid('gotoCell',cell);input.focus();returnfalse;}}else{dg.datagrid('cancelEdit',cell.index);dg.datagrid('gotoCell',cell);}}}returntrue;}functioneditCell(target,param){vardg=$(target);varopts=dg.datagrid('options');varinput=dg.datagrid('input',param);if(input){dg.datagrid('gotoCell',param);input.focus();return;}if(!endCellEdit(target,true)){return;}if(opts.onBeforeCellEdit.call(target,param.index,param.field)==false){return;}varfields=dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields'));$.map(fields,function(field){varcol=dg.datagrid('getColumnOption',field);col.editor1=col.editor;if(field!=param.field){col.editor=null;}});varcol=dg.datagrid('getColumnOption',param.field);if(col.editor){dg.datagrid('beginEdit',param.index);varinput=dg.datagrid('input',param);if(input){dg.datagrid('gotoCell',param);setTimeout(function(){input.unbind('.cellediting').bind('keydown.cellediting',function(e){if(e.keyCode==13){returnopts.navHandler['13'].call(target,e);//returnfalse;}});input.focus();},0);opts.onCellEdit.call(target,param.index,param.field,param.value);}else{dg.datagrid('cancelEdit',param.index);dg.datagrid('gotoCell',param);}}else{dg.datagrid('gotoCell',param);}$.map(fields,function(field){varcol=dg.datagrid('getColumnOption',field);col.editor=col.editor1;});}functionenableCellSelecting(target){vardg=$(target);varstate=dg.data('datagrid');varpanel=dg.datagrid('getPanel');varopts=state.options;vardc=state.dc;panel.attr('tabindex',1).css('outline-style','none').unbind('.cellediting').bind('keydown.cellediting',function(e){varh=opts.navHandler[e.keyCode];if(h){returnh.call(target,e);}});dc.body1.add(dc.body2).unbind('.cellediting').bind('click.cellediting',function(e){vartr=$(e.target).closest('.datagrid-row');if(tr.lengthtr.parent().length){vartd=$(e.target).closest('td[field]',tr);if(td.length){varindex=parseInt(tr.attr('datagrid-row-index'));varfield=td.attr('field');varp={index:index,field:field};if(opts.singleSelect){selectCell(target,p);}else{if(opts.ctrlSelect){if(e.ctrlKey){if(td.hasClass('datagrid-row-selected')){unselectCell(target,p);}else{selectCell(target,p);}}else{unselectAllCells(target);selectCell(target,p);}}else{if(td.hasClass('datagrid-row-selected')){unselectCell(target,p);}else{selectCell(target,p);}}}}}}).bind('mouseover.cellediting',function(e){vartd=$(e.target).closest('td[field]');if(td.
using System;

namespace Car.Test.Portal.Models.QueryParams

{

    public class CarCategoryQueryParams : QueryParamsBase

    {

        public string Name { get; set; } 

        public DateTime? JoinStartTime { get; set; }

        public DateTime? JoinEndTime { get; set; }

    }

}

<script type="text/javascript" src="/path/to/SuggestFramework.js"></script>
<script type="text/javascript">window.onload = initializeSuggestFramework;</script>
有了上边两句后,每个取了名的文本框会多出八个属性:
1.action 要求。选拔 GET 情势交给的数目,并回到相关 Javascript 数组的动态页。
2.capture 借使回去的结果不仅一列(比方本例中的单词和国文意思),就要替换顾客输入的那一列(从 1 起头算)。日常那一个和数据库字段相呼应。
可选,默认为 1.
3.columns 下拉突显的列数,比方本例中,按字母查询单词,并将中文意思彰显在侧面。可选,默感觉

在视图刚加载完的时候,先把改善div隐蔽掉。

四.提示,借使现身乱码或然javascript脚本错误请用上边方法消亡。

js部分须求完毕的专门的学问包含:
●节制寻觅条件中类名的长度
●寻找条件中的时间用jqueryui的datapicker来完毕,当在开始时直接收了八个日期,停止日期的抉择范围相应变成该天今后
●开头日期和终止日期只可以通过datapicker设置,所以要把2个文本框设置为只读
●点击搜索开关,把寻觅增加封装成json对象传递个datagrid的queryParams属性

  1. 给后台重回数据的页面(比方display.asp) 增多叁个 GB2312 转 UTF-8 的函数,使用此函数把数据库读出来的内容转成 UTF-8 编码。
  2. 要是是后台为asp页面,代码首行增多<[email=%@LANGUAGE=”VBSCRIPT]%@LANGUAGE=”VBSCRIPT[/email]” CODEPAGE=”936″%> 指令。
  3. 把后台重返数据的页面(举个例子display.asp)文件存成 UTF-8 格式。
    e文最早的作品地址:
    合法下载地址:

当iframe指向的视图施行达成后或许要重回到datagrid所在视图分界面包车型地铁,能够把iframe指向的视图页看作子窗口,从datagrid主视图跳出的模态窗口看作是父窗口,让子窗口举行完成后,调用父窗口的章程。父窗口被子窗口调用的增加打响或收回增多的艺术为:

末段介绍一下,css中须求定义的4个类
.SuggestFramework_List 提醒内容所在区域
.SuggestFramework_Heading 第一条提示
.SuggestFramework_Highlighted 设置高亮的一条指示
.SuggestFramework_Normal 别的提示

  展现和询问

二维数组这么写:
new Array(
new Array(”第1行条第1列”, “第1行第2列”),
new Array(”第2行条第1列”, “第1行条第2列”),
new Array(”第3行条第1列”, “第1行条第2列”)
);

澳门新濠3559 3

意气风发.首先来看一下怎样是suggest framework
Suggest Framework 故名思意,正是仿 谷歌 Suggest 的多个小框架,令你的文本框也可以有提暗意义。利用suggest framework你能够在融洽的网站上十分轻巧达成“输入提示”效果,这种效果会相当的大程度上抓好客商体验,进步搜索频率。
叁个页面上得以出现三个寻觅框,每一个搜索框都得以达成独立陈设。
此框架无浏览器限定,基本特别当前的好些个浏览器,包蕴Internet Explorer 5+ (Win/Mac卡塔尔(قطر‎、Firefox (Win/Mac卡塔尔、Opera 8+等等。

AddCarCategory.cshtml视图中,js和css部分需注意:
● zTree所急需的1个css文件和2个js文件必不可少
● zTree须求在ul的class一定是ztree,即<ul id="tree" class="ztree"...,否则会影响树的呈现,自个儿就吃过那个祸患,私行把ztree改成tree,为那一个难题纠葛了一天!
● 关于jquery验证的jquery.validate.js文件和jquery.validate.unobtrusive.js顺序万万不可颠倒。 ● zTree的性质相当多,setting中的属性,本身也调了众数次,今后看看的能够选取。
● 要把zTree所在的div设置成相对定位,因为希望在展示的时候经过js调控,让它跑到相应的文本框正下方。

framework Suggest Framework 故名思意,正是仿 Google Suggest 的两个小框架,令你的文本框也许有提暗示义。利用suggest...

namespace Car.Test.Portal.Models.QueryParams

{

    public class QueryParamsBase

    {

        public int PageSize { get; set; }

        public int PageIndex { get; set; } 

    }

}
展开@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>添加类别</title>
    <link href="~/Content/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="~/Content/themes/gray/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-migrate-1.2.1.min.js"></script>
    <script src="~/Scripts/zTree_v3/jquery.ztree.core-3.5.js"></script>
    <script src="~/Scripts/zTree_v3/jquery.ztree.excheck-3.5.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
     <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>



    <style type="text/css">
         .field-validation-error { 
            color: red;
        }

        .fdwith {
            display: inline-block;
            width: 150px;
        }

         ul {
            list-style-type: none;
        }
    </style>
    <script type="text/javascript">
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
                //chkboxType: { "Y": "ps", "N": "ps" }
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                expandSpeed: "fast",
                showIcon: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "ID",
                    pIdKey: "ParentID",
                    rootPid: 0
                },
                key: {
                    name: "Name",
                    pId: "ParentID",
                    id: "ID"
                }
            },
            callback: { //回调函数                              
                //dblclick: zTreeOnDblclick
                onClick: onClick,
                onCheck: onCheck
            }
        };

        var zTree;

        //点击节点改变节点的选中状态
        function onClick(e, treeId, treeNode) {
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        //把选中节点的name属性值显示到input上
        function onCheck(e, treeId, treeNode) {
            var nodes = zTree.getCheckedNodes(true),
            v = "",vId="";
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].Name + ",";
                vId += nodes[i].ID + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            if (vId.length > 0) vId = vId.substring(0, vId.length - 1);
            $("#getCategory").attr("value", v);
            $("#categoryId").attr("value", vId);
        }

        //显示树
        function showMenu() {
            var cObj = $("#getCategory");
            var cOffset = $("#getCategory").offset();

            $("#CategoryDiv").css({ left: cOffset.left + "px", top: cOffset.top + cObj.outerHeight() + "px" }).slideDown("fast"); //给树定位
            $("body").bind("mousedown", onBodyDown);//绑定鼠标单击事件
        }

        //隐藏树并解除绑定
        function hideMenu() {
            $("#CategoryDiv").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        //鼠标单击空白处事件
        function onBodyDown(event) {
            if (!(event.target.id == "getCategory" || event.target.id == "CategoryDiv" || $(event.target).parents("#CategoryDiv").length > 0)) {
                hideMenu();
                if ($('#getCategory').val().length === 0) {
                    $('#getCategory').val("==请选择分类==");
                }

            }
        }


        $(function () {

            //点击取消执行父窗口的方法
            $('#cancel').on("click", function () {
                self.parent.cancelAdd();
            });

            //隐藏树
            $("#CategoryDiv").css("display", "none");

            //预先加载树
            $.ajax({
                cache: false,
                url: '@Url.Action("LoadAllCategories", "Home")',
                type: "GET",
                dataType: "text",
                success: function (result) {
                    $.fn.zTree.init($("#tree"), setting, eval('(' + result + ')'));
                    zTree = $.fn.zTree.getZTreeObj("tree");
                    zTree.expandAll(true);
                },
                error: function (xhr, status) {
                    alert("加载类别失败" + status);
                }
            });

            //加载部分视图内容
            $.ajax({
                cache: false,
                url: '@Url.Action("AddModel", "Home")',
                contentType: 'application/html;charset=utf-8',
                type: "GET",
                success: function (result) {
                    $('#content').html(result);
                    $('#ld').val(""); //让dropdownlist选择默认项
                    //限制请选择分类为只读
                    $('#getCategory').attr('readonly', true);
                    $.validator.unobtrusive.parse("form");
                },
                error: function (xhr, status) {
                    alert("加载内容失败" + status);
                }
            });

            //点击修改发送异步请求到控制器
            $('#operate').on("click", "#up", function() {
                $.ajax({
                    cache: false,
                    url: '@Url.Action("AddCarCategory", "Home")',
                    type: "POST",
                    data: $('#addForm').serialize(),
                    success: function (data) {
                        if (data.msg) {
                            self.parent.refreshAfterAdd();
                        } else {
                            $('#content').html(data);
                            $('#ld').val(""); //让dropdownlist选择默认项
                            //限制请选择分类为只读
                            $('#getCategory').attr('readonly', true);
                            $.validator.unobtrusive.parse("form");
                        }
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')");
                    }
                });
            });


            //点击选择分类
            $('#content').on("click", "#getCategory", function() {
                $("#CategoryDiv").css("display", "block");
                showMenu();
            });

        });
    </script>
</head>
    <body style="height:550px;">
       <div id="wrapper">
            <div id="content">
            </div>
            <div id="operate" style="text-align: center;">
                <input type="button" id="up" value="添加" />   <input type="button" id="cancel" value="取消/关闭窗口"/>
            </div>

            <div id="CategoryDiv" style="position: absolute;background-color: #e3e3e3;text-align: center;">
                <input type="button" value="展开" onclick="zTree.expandAll(true);"/>
                <input type="button" value="折叠" onclick="zTree.expandAll(false);"/>
                <hr/>

                <ul id="tree" class="ztree" style="margin-top:0; width:180px; height: 250px; overflow:auto;margin: 0 auto 0 auto;"></ul>
            </div>
        </div>
    </body>
</html>

 

        //修改成功后

        function refreshAfterEdit() {

            initData();

            $('#tt').datagrid("clearSelections");

            $('.editContent').dialog("close");

        }

 

        //取消修改

        function candelEdit() {

            $('#tt').datagrid("clearSelections");

            $('.editContent').dialog("close");

        }

在主视图,即datagrid所在页面视图,放置彰显增添弹出窗口的div,里面有一个iframe。

运用datagrid呈现数据,向调节器发出央浼的时候,datagrid暗中同意带上了脚下页page和页体量rows这2个参数。借使项目中的别的分界面也用datagrid体现数据,大家可以把page和rows封装成三个基类:

当点击datagrid增添按键,向调整器方法/Home/AddCarCategory发送八个ajax的get诉求,倘若须求到数量,ifram指向到新的视图,突显加多div,并以模态窗口的款型弹出。

       [HttpPost]

        public ActionResult DeleteCarCategories()

        {

            var strIds = Request["ids"];

            strIds = strIds.Substring(0, strIds.Length - 1);

            string[] ids = strIds.Split('_');

            List<int> list = new List<int>();

            foreach (var item in ids)

            {

                int id = int.Parse(item);

                list.Add(id);

            }

            if (DeleteCarCategoriesByBatch(list) > 0)

            {

                return Json(new {msg = true});

            }

            else

            {

                return Json(new { msg = "no"});

            }

        }

 

        private int DeleteCarCategoriesByBatch(List<int> ids)

        {

            var carCategories = CarCategoryRepository.LoadEntities(c => ids.Contains(c.ID)).ToList();

            for (int i = 0; i < carCategories.Count(); i++)

            {

                carCategories[i].DelFlag = (short)DelFlagEnum.Delete;

                carCategories[i].SubTime = DateTime.Now;

            }

            return CarCategoryRepository.SaveChanges();

        }

        #endregion

 

 

编排强类型部分视图中, @Html.HiddenFor(c => c.ParentID,new {id = "categoryId"}卡塔尔国隐讳域用来展示由调控器方法传递的视图模型中的ParentID值。并且,会依靠那些ParentID把相应的节点名称展现到<input id="getCategory" type="text" value="==请采取分类==" />上。

而当输入搜索条件时,datagrid的queryParams属质量选取json格式的追寻条件,此时,datagrid向调整器发出乞求,不唯有有page和rows那2个参数,还包含了追寻条件中的键值对。能够把与种种模型对应的查究条件封装成多少个世襲QueryParamsBase的类:

 

加多div中iframe指向的视图页面,在逻辑上能够分成2有的,后生可畏部分是以视图模型以至模型验证有关的,大家把它方在七个强类型部分视图中,再通过jquery异步加载它。别的一些正是加多按键和打消,点击它们,调用父窗口的措施。

与寻觅和出示相关的html部分为:

        $(function() {

            //隐藏元素

            initialHide();

        });    

 

        //隐藏元素

        function initialHide() {

            $('.addContent').css("display", "none");

            $('.editContent').css("display", "none");

        } 

AddModel.cshtml强类型部分视图,大家期待点击id="getCategory"的input的时候,突显zTree树,而点击zTree节点的时候,id="getCategory"的input展现节点名称,把真正的ID保存到id="categoryId" name="ParentID"的隐瞒域中。

 

在主视图,即datagrid所在页面视图,放置显示改进弹出窗口的div,里面有一个iframe。

       private string txtName = string.Empty;

        private DateTime? startSubTime = null;

        private DateTime? endSubTime = null;

 

        public ICarCategoryRepository CarCategoryRepository { get; set; }

 

        public HomeController(ICarCategoryRepository carCategoryRepository)

        {

            this.CarCategoryRepository = carCategoryRepository;

        }

 

        public HomeController():this(new CarCategoryRepository()){}

 

        #region 显示分类 

        public ActionResult Index()

        {

            return View();

        }

 

        //显示所有分类并考虑查询和分页

        public ActionResult GetCarCategoryJson()

        {

            //获取datagrid传来的2个参数

            int pageIndex = int.Parse(Request["page"]);

            int pageSize = int.Parse(Request["rows"]);

 

            //获取搜索参数

            if (!string.IsNullOrEmpty(Request["txtName"]))

            {

                txtName = Request["txtName"];

            }

            if (!string.IsNullOrEmpty(Request["startSubTime"]))

            {

                startSubTime = DateTime.Parse(Request["startSubTime"]);

            }

            if (!string.IsNullOrEmpty(Request["endSubTime"]))

            {

                endSubTime = DateTime.Parse(Request["endSubTime"]);

            }

 

            //初始化查询实例

            var temp = new CarCategoryQueryParams

            {

                PageIndex = pageIndex,

                PageSize = pageSize,

                Name = txtName,

                JoinEndTime = endSubTime,

                JoinStartTime = startSubTime

            };

 

            //获取所有满足条件的数据,并获得总记录数

            int totalNum = 0;

            var allCarCategory = LoadPageCarCategoryData(temp, out totalNum);

 

            //投影出需要传递到前台的数据

            var result = from c in allCarCategory

                select new

                {

                    c.ID,

                    c.Name,

                    c.IsLeaf,

                    c.Level,

                    c.ParentID,

                    c.PreLetter,

                    c.Status,

                    c.DelFlag,

                    c.SubTime                  

                };

 

            //构建datagrid所需要的json格式

            var jsonResult = new { total = totalNum, rows = result };

            return Json(jsonResult, JsonRequestBehavior.AllowGet);

        }

 

        //根据查询条件获得分页数据

        private IEnumerable<CarCategory> LoadPageCarCategoryData(CarCategoryQueryParams param, out int total)

        {

            var allCarCategories =

                CarCategoryRepository.LoadEntities(

                    c => c.Status == (short) StatusEnum.Enable && c.DelFlag == (short) DelFlagEnum.Normal);

            if (!string.IsNullOrEmpty(param.Name))

            {

                allCarCategories = allCarCategories.Where(c => c.Name.Contains(param.Name));

            }

            if (!string.IsNullOrEmpty(param.JoinStartTime.ToString()) &&

               !string.IsNullOrEmpty(param.JoinEndTime.ToString()))

            {

                allCarCategories =

                    allCarCategories.Where(c => c.SubTime >= param.JoinStartTime && c.SubTime <= param.JoinEndTime);

            }

 

            total = allCarCategories.Count();

 

            IEnumerable<CarCategory> result = allCarCategories

                .OrderByDescending(c => c.ID)

                .Skip(param.PageSize*(param.PageIndex - 1))

                .Take(param.PageSize);

            return result;

        }

        #endregion
    <script type="text/javascript">

        $(function() {

            //限制类名的长度

            limitInputLength($('#txtActionName'));

 

            //限制时间搜索为只读

            $('#startSubTime').attr('readonly', true);

            $('#endSubTime').attr('readonly', true);

 

            //起始和结束日期

            fromDateToDate();

 

            //显示列表

            initData();

 

            //搜索

            $('.query').on("click", "#btnSearch", function () {

                initData(initQuery());

            });

        });

 

        //限制文本框长度

        function limitInputLength(_input) {

            var _max = _input.attr('maxlength');

            _input.bind('keyup change', function () {

                if ($(this).val().length > _max) {

                    ($(this).val($(this).val().substring(0, _max)));

                }

            });

        }

 

        //起始和结束日期

        function fromDateToDate() {

            $('#startSubTime').datepicker({

                dateFormat: "yy-mm-dd",

                changeMonth: true,

                changeYear: true,

                numberOfMonths: 2,

                onClose: function (selectedDate) {

                    $("#endSubTime").datepicker("option", "minDate", selectedDate);

                }

            });

 

            $('#endSubTime').datepicker({

                dateFormat: "yy-mm-dd",

                changeMonth: true,

                changeYear: true,

                numberOfMonths: 2,

                onClose: function (selectedDate) {

                    $("#startSubTime").datepicker("option", "maxDate", selectedDate);

                }

            });

        }

 

        //获取查询表单的值组成json

        function initQuery() {

            var queryParams = {

                txtName: $('#txtName').val(),

                startSubTime: $('#startSubTime').val()

            };

            return queryParams;

        }

 

        //显示分类

        function initData(params) {

            $('#tt').datagrid({

                url: '@Url.Action("GetCarCategoryJson","Home")',

                title: '分类列表',

                //width: 800,

                height: 390,

                fitColumns: true,

                nowrap: true,

                showFooter: true,

                idField: 'ID',

                loadMsg: '正在加载信息...',

                pagination: true,

                singleSelect: false,

                queryParams: params,

                pageSize: 10,

                pageNumber: 1,

                pageList: [10, 20, 30],

                //toolbar: '#query',

                columns: [

                    [

                        { field: 'ck', checkbox: true, align: 'center', width: 30 },

                        { field: 'ID', title: '编号' },

                        { field: 'Name', title: '类名' },

                        { field: 'PreLetter', title: '前缀字母' },

                        { field: 'ParentID', title: '父级ID' },

                        { field: 'Level', title: '层级' },

                        { field: 'IsLeaf', title: '是否叶节点' },

                        {

                            field: 'DelFlag',

                            title: '删除状态',

                            formatter: function (value, row, index) {

                                if (value == "0") {

                                    return '使用中';

                                } else if (value == "1") {

                                    return '逻辑删除';

                                } else {

                                    return '物理删除';

                                }

                            }

                        },

                        {

                            field: 'SubTime',

                            title: '修改时间',

                            formatter: function (value, row, index) {

                                return eval("new " + value.substr(1, value.length - 2)).toLocaleDateString();

                            }

                        }

                    ]

                ],

                toolbar: [

                    {

                        id: 'btnAdd',

                        text: '添加',

                        iconCls: 'icon-add',

                        handler: function () {

                            showAdd();

                        }

                    }, '-', {

                        id: 'btnUpdate',

                        text: '修改',

                        iconCls: 'icon-edit',

                        handler: function () {

                            var rows = $('#tt').datagrid("getSelections");

                            if (rows.length != 1) {

                                $.messager.alert("提示", "只能选择一个分类进行编辑");

                                return;

                            }

                            //修改方法

                            showEdit(rows[0].ID);

                        }

                    }, '-', {

                        id: 'btnDelete',

                        text: '删除',

                        iconCls: 'icon-remove',

                        handler: function () {

                            var rows = $('#tt').datagrid("getSelections");

                            if (rows.length < 1) {

                                $.messager.alert("提示", "请选择要删除的分类");

                                return;

                            }

                            $.messager.confirm("提示信息", "确定要删除吗?", function (r) {

                                if (r) {

                                    var strIds = "";

                                    for (var i = 0; i < rows.length; i++) {

                                        strIds += rows[i].ID + '_'; //1_2_3

                                    }

                                    $.post("@Url.Action("DeleteCarCategories", "Home")", { ids: strIds }, function (data) {

                                        if (data.msg == "no") {

                                            $.messager.alert("提示", "删除失败!");

                                            $('#tt').datagrid("clearSelections");

                                            return;

                                        } else if (data.msg) {

                                            $.messager.alert("提示", "删除成功");

                                            initData(initQuery());

                                            $('#tt').datagrid("clearSelections");

                                        }

                                    });

                                }

                            });

                        }

                    }

                ],

                OnBeforeLoad: function (param) {

                    return true;

                }

            });

        }

    </script>    

 

在视图刚加载完的时候,先把增加div蒙蔽掉。

@model Car.Test.Portal.Models.CarCategoryVm

 

            @using (Html.BeginForm("EditCarCategory", "Home", FormMethod.Post, new { id = "editForm" }))

            {

                @Html.AntiForgeryToken()

                @Html.HiddenFor(c => c.ID)

                <ul>

                    <li>



                            @Html.LabelFor(c => c.Name) 



                        @Html.EditorFor(c => c.Name)

                        @Html.ValidationMessageFor(c => c.Name)

                    </li>

                    <li>



                            @Html.LabelFor(c => c.PreLetter)



                        @Html.EditorFor(c => c.PreLetter)

                        @Html.ValidationMessageFor(c => c.PreLetter)

                    </li>

                    <li>



                            @Html.LabelFor(c => c.ParentID)



                        <input id="getCategory" type="text" value="==请选择分类==" />

                        @Html.ValidationMessageFor(c => c.ParentID)

                        @Html.HiddenFor(c => c.ParentID,new {id = "categoryId"})

                    </li>

                    <li>



                            @Html.LabelFor(c => c.Level) 



                        @Html.EditorFor(c => c.Level)

                        @Html.ValidationMessageFor(c => c.Level)

                    </li>

                    <li>



                            @Html.LabelFor(c => c.IsLeaf) 



                        @Html.DropDownListFor(c => c.IsLeaf,new[]

                        {

                            new SelectListItem(){Text = "是",Value = bool.TrueString}, 

                            new SelectListItem(){Text = "否",Value = bool.FalseString}

                        },"==选择是否为叶节点==",new {id="ld"})

                        @Html.ValidationMessageFor(c => c.IsLeaf)

                    </li>

                </ul>

            }           

 

在前台湾电视中心图中,把获得的id拼接成"1,2,3,"格局,然后在调控器方法中,把最后的逗号去掉,再Split成数组,把里面包车型客车要素放到List<int>会集中作为服务层方法的参数,对世界模型施行逻辑删除。视图部分在查询和显示部分原来就有,调整器部分如下:

    <!--查询开始-->

    <div id="query" class="query" >

        类名: 

        <input id="txtName" style="line-height:22px;border:1px solid #ccc" maxlength="10"> 

        提交时间从: 

        <input type="text" name="startSubTime" id="startSubTime" style="line-height:22px;border:1px solid #ccc" />

        至: 

        <input type="text" name="endSubTime" id="endSubTime" style="line-height:22px;border:1px solid #ccc" />

        <a href="#" class="easyui-linkbutton" plain="false" id="btnSearch">搜索</a> 

    </div>    

    <!--查询结束-->

 

    <!--表格开始-->

    <div class="ctable" id="ctable">

        <table id="tt"></table>

    </div>

    <!--表格结束--> 
       #region 编辑分类

 

        public ActionResult EditCarCategory(int id)

        {

            ViewData["id"] = id;

            return View();

        }

 

        public ActionResult EditModel(int id)

        {

            var carCategoryDb = CarCategoryRepository.LoadEntities(c => c.ID == id).FirstOrDefault();

            CarCategoryVm carCategoryVm = AutoMapper.Mapper.DynamicMap<CarCategory, CarCategoryVm>(carCategoryDb);

            return PartialView(carCategoryVm);

        }

 

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult EditCarCategory(CarCategoryVm carCategoryVm)

        {

            if (ModelState.IsValid)

            {

                carCategoryVm.Status = (short)StatusEnum.Enable;

                carCategoryVm.DelFlag = (short)DelFlagEnum.Normal;

                carCategoryVm.SubTime = DateTime.Now;

 

                CarCategory carCategory = AutoMapper.Mapper.DynamicMap<CarCategoryVm, CarCategory>(carCategoryVm);

                CarCategoryRepository.UpdateEntity(carCategory);

                CarCategoryRepository.SaveChanges();

                return Json(new {msg = true});

            }

            else

            {

                return PartialView("EditModel", carCategoryVm);

            }

        }

        #endregion       

 

编辑视图的法规与丰裕视图相同,只但是要基于从调控器方法传递过来的视图模型中的ParentID所对应的节点名称展现到强类型部分视图的<input id="getCategory" type="text" value="==请选用分类==" />上。

       //添加对话框

        function showAdd() {

            var url = "/Home/AddCarCategory";

            $.ajax({

                cache: false,

                url: url,

                contentType: 'application/html;charset=utf-8',

                type: "GET",

                success: function (result) {

                    if (result)  {

                        $("#frameAdd").attr("src", url);

                        $("#addContent").css("display", "block");

                        $('#addContent').dialog({

                            toolbar: [],

                            maximizable: false,

                            draggable: true,

                            resizable: false,

                            closable: false,

                            modal: true,

                            cache: false,

                            //height: '100%',

                            width: 560,

                            height: 480,

                            top:50,

                            title: "添加类别",

                            onOpen: function () {

 

                            },

                            buttons: []

                        });

                    }

                },

                error: function (xhr, status) {

                    alert("加载内容失败" + status);

                }

            });

        }

 

当iframe指向的视图奉行达成后要么要赶回到datagrid所在视图分界面包车型地铁,能够把iframe指向的视图页看作子窗口,从datagrid主视图跳出的模态窗口看作是父窗口,让子窗口实行完成后,调用父窗口的措施。父窗口被子窗口调用的改革成功或注销改正的必须要经过的路为:

        $(function() {

            //隐藏元素

            initialHide();

        });    

 

        //隐藏元素

        function initialHide() {

            $('.addContent').css("display", "none");

            $('.editContent').css("display", "none");

        }     
        //添加成功后

        function refreshAfterAdd() {

            initData();

            $('#tt').datagrid("clearSelections");

            $('.addContent').dialog("close");

        }

 

        //取消添加

        function  cancelAdd() {

            $('.addContent').dialog("close");

        }  
展开@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>编辑类别</title>
    <link href="~/Content/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="~/Content/themes/gray/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-migrate-1.2.1.min.js"></script>
    <script src="~/Scripts/zTree_v3/jquery.ztree.core-3.5.js"></script>
    <script src="~/Scripts/zTree_v3/jquery.ztree.excheck-3.5.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
     <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>   
    <style type="text/css">
         .field-validation-error { 
            color: red;
        }

        .fdwith {
            display: inline-block;
            width: 150px;
        }

         ul {
            list-style-type: none;
        }
    </style>
    <script type="text/javascript">
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
                //chkboxType: { "Y": "ps", "N": "ps" }
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                expandSpeed: "fast",
                showIcon: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "ID",
                    pIdKey: "ParentID",
                    rootPid: 0
                },
                key: {
                    name: "Name",
                    pId: "ParentID",
                    id: "ID"
                }
            },
            callback: { //回调函数                              
                //dblclick: zTreeOnDblclick
                onClick: onClick,
                onCheck: onCheck
            }
        };

        var zTree;

        //点击节点改变节点的选中状态
        function onClick(e, treeId, treeNode) {
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        //把选中节点的name属性值显示到input上
        function onCheck(e, treeId, treeNode) {
            var nodes = zTree.getCheckedNodes(true),
            v = "", vId = "";
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].Name + ",";
                vId += nodes[i].ID + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            if (vId.length > 0) vId = vId.substring(0, vId.length - 1);
            $("#getCategory").attr("value", v);
            $("#categoryId").attr("value", vId);
        }

        //显示树
        function showMenu() {
            var cObj = $("#getCategory");
            var cOffset = $("#getCategory").offset();

            $("#CategoryDiv").css({ left: cOffset.left + "px", top: cOffset.top + cObj.outerHeight() + "px" }).slideDown("fast"); //给树定位
            $("body").bind("mousedown", onBodyDown);//绑定鼠标单击事件
        }

        //隐藏树并解除绑定
        function hideMenu() {
            $("#CategoryDiv").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        //鼠标单击空白处事件
        function onBodyDown(event) {
            if (!(event.target.id == "getCategory" || event.target.id == "CategoryDiv" || $(event.target).parents("#CategoryDiv").length > 0)) {
                hideMenu();
                if ($('#getCategory').val().length === 0) {
                    $('#getCategory').val("==请选择分类==");
                }

            }
        }

        //加载部分视图,根据父类ID,勾选树中的选项并显示到显式文本框getCategory中
        function checkAndDisplay() {
            var parentId = $('#categoryId').val(); //注意:这里的父级ID为某个节点的ID
            var node = zTree.getNodeByTId(parentId);

            //显示
            var cknodes = zTree.getCheckedNodes(true),
            v = "";
            for (var j = 0; j < cknodes.length; j++) {
                v += cknodes[j].Name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            $("#getCategory").attr("value", v);
        }


        $(function () {
            //点击取消执行父窗口的方法
            $('#cancel').on("click", function () {
                self.parent.candelEdit();
            });

            //隐藏树
            $("#CategoryDiv").css("display", "none");


            //预先加载树
            $.ajax({
                cache: false,
                url: '@Url.Action("LoadAllCategories", "Home")',
                type: "GET",
                dataType: "text",
                success: function (result) {
                    $.fn.zTree.init($("#tree"), setting, eval('(' + result + ')'));
                    zTree = $.fn.zTree.getZTreeObj("tree");
                    zTree.expandAll(true);
                },
                error: function (xhr, status) {
                    alert("加载类别失败" + status);
                }
            });

            //加载部分视图内容
            $.ajax({
                cache: false,
                url: '@Url.Action("EditModel", "Home")',
                data: {id: '@ViewData["id"].ToString()'},
                contentType: 'application/html;charset=utf-8',
                type: "GET",
                success: function (result) {
                    $('#content').html(result);
                    checkAndDisplay();
                    //限制请选择分类为只读
                    $('#getCategory').attr('readonly', true);
                    $.validator.unobtrusive.parse("form");
                },
                error: function (xhr, status) {
                    alert("加载内容失败" + status);
                }
            });

            //点击修改发送异步请求到控制器
            $('#operate').on("click", "#up", function () {
                $.ajax({
                    cache: false,
                    url: '@Url.Action("EditCarCategory", "Home")',
                    type: "POST",
                    data: $('#editForm').serialize(),
                    success: function (data) {
                        if (data.msg) {
                            self.parent.refreshAfterEdit();
                        } else {
                            $('#content').html(data);
                            checkAndDisplay();

                            $('#getCategory').attr('readonly', true);//限制请选择分类为只读
                            $.validator.unobtrusive.parse("form");
                        }
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')");
                    }
                });
            });


            //点击选择分类
            $('#content').on("click", "#getCategory", function () {
                $("#CategoryDiv").css("display", "block");
                showMenu();
            });

        });
    </script>
</head>
    <body style="height:550px;">
       <div id="wrapper">
            <div id="content">
            </div>
            <div id="operate" style="text-align: center;">
                <input type="button" id="up" value="修改" />   <input type="button" id="cancel" value="取消/关闭窗口"/>
            </div>

            <div id="CategoryDiv" style="position: absolute;background-color: #e3e3e3;text-align: center;">
                <input type="button" value="展开" onclick="zTree.expandAll(true);"/>
                <input type="button" value="折叠" onclick="zTree.expandAll(false);"/>
                <hr/>

                <ul id="tree" class="ztree" style="margin-top:0; width:180px; height: 250px; overflow:auto;margin: 0 auto 0 auto;"></ul>
            </div>
        </div>
    </body>
</html>

 

 

澳门新濠3559 4澳门新濠3559 5

 

澳门新濠3559 6澳门新濠3559 7

  添加

        #region 添加分类

 

        public ActionResult AddCarCategory()

        {

            //return PartialView(new CarCategoryVm());

            return View();

        }

 

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult AddCarCategory(CarCategoryVm carCategoryVm)

        {

            if (ModelState.IsValid)

            {

                carCategoryVm.Status = (short)StatusEnum.Enable;

                carCategoryVm.DelFlag = (short)DelFlagEnum.Normal;

                carCategoryVm.SubTime = DateTime.Now;

 

                CarCategory carCategory = AutoMapper.Mapper.DynamicMap<CarCategoryVm, CarCategory>(carCategoryVm);

                CarCategoryRepository.AddEntity(carCategory);

                CarCategoryRepository.SaveChanges();

                return Json(new {msg = true});

            }

            else

            {

                //return PartialView(carCategoryVm);

                return PartialView("AddModel", carCategoryVm);

            }

        }

 

        //[ChildActionOnly]

        public ActionResult AddModel()

        {

            return PartialView(new CarCategoryVm());

        }

        #endregion

 

        #region 显示所有分类的树

 

        public string LoadAllCategories()

        {

            var temp =

                CarCategoryRepository.LoadEntities(

                    c => c.DelFlag == (short) DelFlagEnum.Normal && c.Status == (short) StatusEnum.Enable);

            var result = from c in temp

                select new {c.ID, c.Name, c.ParentID};

            //return Json(result, JsonRequestBehavior.AllowGet);

            return JsonSerializeHelper.SerializeToJson(result);

        }

        #endregion        

 

当点击datagrid改善开关,向调节器方法"/Home/EditCarCategory?发送多少个ajax的get央求,倘若央求到多少,ifram指向到新的视图,展现改进div,并以模态窗口的花样弹出。

       //修改对话框

        function showEdit(carCatId) {

            var url = "/Home/EditCarCategory?id=" + carCatId;

            $.ajax({

                cache: false,

                url: url,

                contentType: 'application/html;charset=utf-8',

                type: "GET",

                success: function (result) {

                    if (result) {

                        $("#frameEdit").attr("src", url);

                        $("#editContent").css("display", "block");

                        $('#editContent').dialog({

                            toolbar: [],

                            maximizable: false,

                            draggable: true,

                            resizable: false,

                            closable: false,

                            modal: true,

                            cache: false,

                            //height: '100%',

                            width: 560,

                            title: "修改类别",

                            onOpen: function () {

 

                            },

                            buttons: []

                        });

                    }

                },

                error: function (xhr, status) {

                    alert("加载内容失败" + status);

                }

            });

        }

 

继上生龙活虎篇"MVCInfiniti级分类01,分层布局,引进缓存,达成领域模型与视图模型的炫丽",本篇开端MVCInfiniti级分类的增加和删除改查部分,源码在github。

AddCarCategory.cshtml视图根本专门的学业包含:
● 页面加载达成,向调节器发送异步伏乞,把zTree树先加载上,由于隐讳了zTree所在的div,此时还看不到
● 页面加载实现,项调节器发送异步乞求,把强类型部分视图加载到本页。由于是动态加载的从头到尾的经过,所以须求$.validator.unobtrusive.parse("form"卡塔尔(英语:State of Qatar)此语句,让动态部分视图内容还原客户端验证功能。
● 点击裁撤开关,调用父窗口的吊销增加方法
● 点击增加按键,调用父窗口增多成功方法
● 由于变化的是动态内容,依照"冒泡原理",供给不增加按键up等的点击事件注册到它的父级成分,类似这样:$('#operate').on("click", "#up", function() {}
● 点击部分视图的id="getCategory"的input的时候,展现zTree树,而点击zTree节点的时候,id="getCategory"的input突显节点名称,把真的的ID保存到id="categoryId" name="ParentID"的掩没域中。

 

@model Car.Test.Portal.Models.CarCategoryVm

 



            @using (Html.BeginForm("AddCarCategory", "Home", FormMethod.Post, new { id = "addForm" }))

            {

                @Html.AntiForgeryToken()

                <ul>

                    <li>



                            @Html.LabelFor(c => c.Name) 



                        @Html.EditorFor(c => c.Name)

                        @Html.ValidationMessageFor(c => c.Name)

                    </li>

                    <li>



                            @Html.LabelFor(c => c.PreLetter)



                        @Html.EditorFor(c => c.PreLetter)

                        @Html.ValidationMessageFor(c => c.PreLetter)

                    </li>

                    <li>



                            @Html.LabelFor(c => c.ParentID)



                        <input id="getCategory" type="text" value="==请选择分类==" />

                        @Html.ValidationMessageFor(c => c.ParentID)

                        <input type="hidden" id="categoryId" name="ParentID"/>

                    </li>

                    <li>



                            @Html.LabelFor(c => c.Level) 



                        @Html.EditorFor(c => c.Level)

                        @Html.ValidationMessageFor(c => c.Level)

                    </li>

                    <li>



                            @Html.LabelFor(c => c.IsLeaf) 



                        @Html.DropDownListFor(c => c.IsLeaf,new[]

                        {

                            new SelectListItem(){Text = "是",Value = bool.TrueString}, 

                            new SelectListItem(){Text = "否",Value = bool.FalseString}

                        },"==选择是否为叶节点==",new {id="ld"})

                        @Html.ValidationMessageFor(c => c.IsLeaf)

                    </li>

                </ul>

            }

 

  批量去除

调整器中的 AddCarCategory(卡塔尔(قطر‎用来体现增多div中iframe指向的视图页面,AddCarCategory(CarCategoryVm carCategoryVm卡塔尔(قطر‎用来处理增加,AddModel(卡塔尔(英语:State of Qatar)用来体现强类型部分视图,在AddCarCategory.cshtml视图中通过jquery异步加载。调节器部分为:

调控器部分,把收到到的有关分页或询问的参数封装成一个类作为参数交给服务层的一个情势,这里为了方便,把相应在服务层的必由之路直接写在了调节器内。最终把收获的集纳打包成json对象,并满意datagrid所梦想的格式传递到前台湾电视中心图。

编辑:编程 本文来源:这种效果会很大程度上提高用户体验,页面中引

关键词: