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之货物管理四 (二十二))时会发现一些我们需要的复选框并没有出现在我们想要它出现的位置。如下图中红框处,我们想要出现一个复选框,但实现上却没有出现。下面我们来解决这个问题。

十四、样式冲突

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:;
margin:;
padding:;
width: 15px;
height: 18px;
}

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

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)的更多相关文章

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

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

    目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) ab ...

随机推荐

  1. dubbo 的 spi 思想是什么?

    面试题 dubbo 的 spi 思想是什么? 面试官心理分析 继续深入问呗,前面一些基础性的东西问完了,确定你应该都 ok,了解 dubbo 的一些基本东西,那么问个稍微难一点点的问题,就是 spi, ...

  2. jmeter 命令压测生成报告

    1.本地复制到远程 scp -r local_folder remote_username@remote_ip:remote_folder 或者 scp -r local_folder remote_ ...

  3. C++ const 引用 指针

    先简单回忆一下常量的性质: int main() { const int buffSize = 512; buffsize = 512; //× buffSize是常量 } 初始化时: const i ...

  4. Asp.Net Core2.2 源码阅读系列——控制台日志源码解析

      为了让我们第一时间知道程序的运行状态,Asp.Net Core 添加了默认的日志输出服务.这看起来并没有什么问题,对于开发人员也相当友好,但如果不了解日志输出的细节,也有可能因为错误的日志级别配置 ...

  5. 机器学习常用性能度量中的Accuracy、Precision、Recall、ROC、F score等都是些什么东西?

    一篇文章就搞懂啦,这个必须收藏! 我们以图片分类来举例,当然换成文本.语音等也是一样的. Positive 正样本.比如你要识别一组图片是不是猫,那么你预测某张图片是猫,这张图片就被预测成了正样本. ...

  6. [Algorithm] Heap & Priority queue

    这里只是简单的了解,具体内容详见推荐的原链接 注意堆和树的区别 堆就是优先级队列的实现形式 堆排序 排序过程 Ref: 排序算法之堆排序(Heapsort)解析 第一步(构造初始堆): {7, 5, ...

  7. vscode Springboot 启动debug报错:Build failed, do you want to continue?

    一,前言 vscode我感觉是一个特别好用的开发工具,我根据文章https://www.cnblogs.com/WangBoBlog/p/9464281.html去搭建一个简单的springboot工 ...

  8. APP自動化測試腳本3

    package com.lemon.day01; import java.net.MalformedURLException; import java.net.URL; import java.uti ...

  9. MySQL之增删改查之

    MySQL之增删改查   前言:以下是MySQL最基本的增删改查语句,很多IT工作者都必须要会的命令,也是IT行业面试最常考的知识点,由于是入门级基础命令,所有所有操作都建立在单表上,未涉及多表操作. ...

  10. Spring 梳理 -异常处理

    Spring 提供了多种方式将异常转换为相应 Spring框架提供的通用异常,将异常转换为HTTP状态码 Spring默认会将自身抛出的异常自动映射到合适的状态码,如下是一些示例: 举个例子,当后端抛 ...