码迷,mamicode.com
首页 > Web开发 > 详细

Asp.Net MVC4 列表批量操作js文本实现

时间:2016-01-22 14:03:07      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:

一、想要实现这样的操作

  技术分享

1、分布视图页面_NewList(这里用的是异步加载数据):

  @using Webdiyer.WebControls.Mvc;
  @model PagedList<Domain.Entities.Finance>

  <div class="list">
    <div class="datelist clearfix">
      <table class="table" cellpadding="0" cellspacing="0">
        <tr>

        <th width="30" style="border-radius: 10px 0px 0px;"><input id="SelectAll" type="checkbox" /></th>
        <th width="275">项目名称</th>
        <th width="75">类型</th>
        <th width="50">金额</th>
        <th width="50">报销单</th>
        <th width="30">是否报销</th>
        <th width="50">添加人</th>
        <th width="140">添加时间</th>
        <th width="170" style="border-radius: 0px 10px 0px 0px;">操作</th>
        </tr>
      @if (Model != null)
      {
        foreach (var item in Model)
        {<tr ><td><input value="@item.Id"  data-adminId="@item.Admin_Id"  data-p="@item.State" type="checkbox"/></td>

            <td>@item.Name</td>

            <td>@(item.Type==2:"收入":"支出")</td>
            <td>@item.Money</td>

            <td>@(item.PayUrl!=null:"有":"无")</td>

            <td>@(item.IsPay==1:"是":"否")</td>
          @if (ViewBag.AdminList!= null){
            if (item.AdminId!= null)
            {
              foreach (Domain.Entities.Admin admin in ViewBag.AdminList)
              {
                if (item.AdminId == admin.Id)
                {<td>@admin.Name</td>}

              }

            }

            else{ <td></td>}}else{ <td></td>}

            <td>@item.Add_Date</td>
            <td><a data-id="@item.Id" style="cursor: pointer;" ruleId="Finance/Update" id="Update">修改</a>

               <a data-id="@item.Id" style="cursor: pointer;" ruleId="Finance/ThoughtPay" id="ThoughtPay">报销</a>

              <a data-id="@item.Id" style="cursor:pointer;" ruleId="Finance/Del" id="Del">删除</a>

            </td>

            </tr> }}

        </table>
      </div>
    </div>
    <div class="tital_bar">
      <div class="operateAndPagin clearfix"> 
        <p class="o_lt">
          <a id="BatchDeleteItem" ruleid="Finance/BatchDeleteItem" class="btn btn32_cnt">批量删除</a>
          <a id="BatchPay"ruleid="Finance/BatchPay" class="btn btn32_cnt">批量报销</a>
          <a id="CancelBatchPay" ruleid="Finance/CancelBatchPay" class="btn btn32_cnt">批量取消报销</a>
        </p>
        <div class="Pagination">
        @Ajax.Pager(Model, new PagerOptions
        {
          PageIndexParameterName = "pageIndex",
          ShowPageIndexBox = true,
          PageIndexBoxType = PageIndexBoxType.DropDownList,
          NumericPagerItemCount = 3,
          CurrentPagerItemWrapperFormatString = "<span class=‘current‘><a data-pageindex={0} href=‘/Finance/FinanceList?pageIndex={0}‘>{0}</a></span>",
          ShowGoButton = false
         },
         new MvcAjaxOptions
         {
          UpdateTargetId = "datas",
          HttpMethod = "Post",
          DataFormId = "searchForm",
         }, new { id = "diggpager" })
          <div class="clear"></div>
         </div>
        </div>
      </div>

   2、在视图中FinanceList:

      <script src="@Url.Content("~/Scripts/js/jquery-1.8.2.min.js")" type="text/javascript"></script>    

    <script src="../../Scripts/js/Finance.js" type="text/javascript"></script>    

    <script type="text/javascript">
      $(function () {
        window.Finance.Init();
      });
    </script>

  3、在Finance.js中:  

    (function () {
        var Finance= {
           Init: function () {
                  $("#SelectAll").live("click", this.SelectAll);
                  $("#BatchDeleteItem").live("click", this.BatchDeleteItem); //批量删除
                  $("#BatchPay").live("click", this.BatchPay); //批量报销
                  $("#CancelBatchPay").live("click", this.CancelBatchPay); //批量取消报销
                  $("#Del").live("click", this.Del); //删除
                  $("#Update").live("click", this.Update); //修改
                  $("#ThoughtPay").live("click", this.ThoughtPay); //报销
                  $(document).ajaxSuccess(function (event, xhr, settings) {
                      $(".datelist").find("table tr:even").addClass("bgcolor");
                  });
            },
            SelectAll: function () {
              if ($(this).is(":checked")) {
                $(".datelist :checkbox").attr("checked", true);
              } else {
                $(".datelist :checkbox").removeAttr("checked");
              }
            },
            Del: function () {
              var id = $(this).attr("data-id");
              if (!confirm("确定要删除该信息吗?")) { return false; }
              $.ajax({
                type: "POST",
                url: "/Finance/Del",
                data: { "Id": id },
                dataType: "json",
                success: function (data) {
                    if (data.Is_Success) {
                      location.href = "/Finance/FinanceList";
                    }else {alert(data.Message);}

                }
               });
           },
            Update: function () {
            var id = $(this).attr("data-id");
            if (!confirm("确定要修改信息吗?")) { return false; }
            $.ajax({
                type: "POST",
                url: "/Finance/Update",
                data: { "Id": id },
                dataType: "json",
                success: function (data) {
                    if (data.Is_Success) {
                      location.href = "/Finance/FinanceList.html";
                    }else {
 alert(data.Message);}

                }
            });
          },
          ThoughtPay: function () {
              var id = $(this).attr("data-id");
              if (!confirm("确定要报销信息吗?")) { return false; }
              $.ajax({
                type: "POST",
                url: "/Finance/ThoughtPay",
                data: { "Id": id },
                dataType: "json",
                success: function (data) {
                    if (data.Is_Success) {
                        location.href = "/Finance/FinanceList";
                    }else { alert(data.Message); }
                }
              });
            },
           

            BatchDeleteItem: function () {
                var re = true;
                var ids = GetCheckedId();
                if (!ids) { alert("请选择要删除的信息!"); return false; }
                if (!confirm("确定要删除选中项吗?")) { return false; }
                var adminId = $("#adminId").val();
                var adminIds = "";
                $(".datelist :checked").each(function () {
                    var admin = $(this).attr(‘data-adminId‘);
                    var state = $(this).attr(‘data-p‘);
                    if (admin != adminId || state == 1) {
                      re = false;
                    }

                });
                if (!re) {
                  alert("不能批量删除非当前用户或者已报销信息,批量删除失败!");
                  return false;
                }


                $.ajax({
                  type: "POST",
                  url: "/Finance/BatchDeleteItem.html",
                  data: { "Ids": ids },
                  success: function (data) {
                    if (data.Is_Success) {
                      location.href = "/Finance/FinanceList.html";
                    }
                    else { alert(data.Message); }
                   }
                  });
                },

                BatchPay: function () {
                    var states = GetCheckedData("data-s");
                    var ids = GetCheckedId();
                    if (!confirm("确定要报销选中的信息吗?")) { return false; }

                    $.ajax({
                        type: "POST",
                        url: "/Finance/BatchPay",
                        data: { "ids": ids },
                        dataType: "json",
                        success: function (data) {
                          if (data.Is_Success) {
                            location.href = "/Finance/FinanceList.html";
                          }else { alert(data.Message); }
                        }
                    });
                },
                CancelBatchPay: function () {
                    var states = GetCheckedData("data-s");
                    var ids = GetCheckedId();
                    if (!confirm("确定要取消报销选中的信息吗?")) { return false; }

                    $.ajax({
                        type: "POST",
                        url: "/Finance/CancelBatchPay.html",
                        data: { "ids": ids },
                        dataType: "json",
                        success: function (data) {
                          if (data.Is_Success) {
                              location.href = "/Finance/FinanceList.html";
                          }else { alert(data.Message); }
                        }
                    });
                }            
          

 

          window.Finance= Finance;
          function GetCheckedId() {
            var ids = $(".datelist :checked").map(function () {
              if ($(this).attr("id") == "SelectAll") {
                return "";
              }
              return $(this).val();
            }).get().join(",");
          return ids;
          };

          function GetCheckedData(data) {
            var ids = $(".datelist :checked").map(function () {
              if ($(this).attr("id") == "SelectAll") {
                return "";
              }
              return $(this).attr(data);
            }).get().join(",");
            return ids;
         };
    })();

  4、Controller中(以批量删除为例子)  

    [AuthorizationFilter]
    public ActionResult BatchDeleteItem(string Ids)
    {
      Finance newsModel = new Finance();
      if (Ids.IndexOf(‘,‘) == 0)
      {
        Ids = Ids.Remove(0, 1);
      }
      int result = FinanceClient.FinancesListState(AdminId,Ids,0);
      if (result > 0)
      {
        return Json(new { Is_Success = true, Message = "批量删除信息成功!" });
      }
      else if(result==-2)
      {
        return Json(new { Is_Success = false, Message = "批量删除的信息中有已报销信息,批量删除失败!" });
      }
      else if (result == -3)
      {
        return Json(new { Is_Success = false, Message = "不能批量删除非当前用户的财务信息,批量删除失败!" });
      }
      return Json(new { Is_Success = false, Message = "批量删除信息失败!"});
    }

  其中对于后台错误信息可以返回Content,例如:

  return Content("<script> alert(‘获得数据失败!‘);window.location=‘/Home/FinanceList.html‘</script>");
  return Content("<script> alert(‘获得数据失败!‘);history.back()</script>");

Asp.Net MVC4 列表批量操作js文本实现

标签:

原文地址:http://www.cnblogs.com/wyhBlog/p/5149217.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!