abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)

abp(net core)+easyui+efcore实现仓储管理系统目录

abp(net core)+easyui+efcore实现仓储管理系统——ABP整体介绍(一）

abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)

abp(net core)+easyui+efcore实现仓储管理系统——领域层建立实体(三)

 abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)

abp(net core)+easyui+efcore实现仓储管理系统——建立应用服务（五）

abp(net core)+easyui+efcore实现仓储管理系统——展示层实现增删改查之控制器（六）

abp(net core)+easyui+efcore实现仓储管理系统——展示层实现增删改查之列表视图（七）

abp(net core)+easyui+efcore实现仓储管理系统——展示层实现增删改查之增删改视图（八）

abp(net core)+easyui+efcore实现仓储管理系统——展示层实现增删改查之菜单与测试（九）

abp(net core)+easyui+efcore实现仓储管理系统——多语言（十）

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一)

abp(net core)+easyui+efcore实现仓储管理系统——菜单-上 (十六)

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理一 (十九)

 abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理二 (二十)

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理三 (二十一)

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理四 (二十二)

 

 

       如今咱们已经实现了咱们想要实现的功能，可是这些功能还不完美。若是是细心的读者，在看上一篇文章（abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理四 (二十二) ）时会发现一些咱们须要的复选框并无出如今咱们想要它出现的位置。以下图中红框处，咱们想要出现一个复选框，但实现上却没有出现。下面咱们来解决这个问题。

 

十4、样式冲突

     1. 首先，咱们在Visual Studio 2017中按F5运行应用程序。

     2.在浏览器中的地址栏中输入“http://localhost:5000/”，而后输入管理员用户名进行登陆。

     3.在主界面的菜单中，选择“Business->货物管理”菜单项，浏览器中呈现一个货物信息列表与四个按钮。以下图。你会发现这个列表有问题。以下图红框处，没有复选框。

  

      4.咱们在浏览器(Firefox)在复选框的位置，使用单击鼠标右键，在弹出菜单中选中“查看元素”，以下图。而后咱们看到在html代码中是有复选框的相关代码的，可是却没有在页面中显示。咱们来看一下这个复选框的样式，以下图中的红框处，原来checkbox元素的样式表冲突了。此处的Checkbox元素的样式并非咱们想要的是EasyUI.css中的样式定义，而实际上却使用了materialize.css样式表中的样式定义。形成了这个Checkbox元素左移了-9999px像素，变的不可见了。

        5. 知道了问题缘由，咱们能够直接在Firefox调试器中修改一下样式，把样式中的left的值由-9999px修改成1px，opacity的值由0改成2，以下图红框处，而后咱们须要的复选框就出如今咱们想要的位置。以下图。

 

 

    6. 那应该如何来解决这个问题呢？仔细观察调试器中的HTML代码，发现Checkbox外面还有一层DIV，这行DIV的class名称为“datagrid-cell-check”。这个发现，咱们就有办法解决这个样式冲突问题了。在Visual Studio 2017的“解决方案资源管理器”中，找到“ABP.TPLMS.Web.MVC”项目的“wwwroot\lib\easyui-1.8\themes\bootstrap”文件夹中找到easyui.css文件，在这个文件中添加以下样式。代码以下。

   .datagrid-header-check input[type=checkbox],
    .datagrid-cell-check input[type=checkbox] {
        position: absolute;
        left: 5px;
        opacity: 1;
        margin: 0;
        padding: 0;
        width: 15px;
        height: 18px;
}

    7.在浏览器中先访问一下其余页面，而后再来访问货物信息列表，此时列表的复选框出现了。以下图。