UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏幕的宽度。

普通情况下可以设置scalesPageToFit＝YES并且td的宽度按百分比设置下就行。实例如下：

1.创建WebView

{//创建WebView
        CGFloat webX = 0;
        CGFloat webY = offset_y;
        CGFloat webW = kAllWidth;
        CGFloat webH = kAllHeight - webY;

        self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(webX, webY, webW, webH)];
        self.webView.opaque = NO;
        self.webView.backgroundColor = [UIColor whiteColor];
        self.webView.scalesPageToFit = YES;
        self.webView.delegate = self;
        self.webView.tag = webViewTag + 2;
        [vContainer addSubview:self.webView];
}

2.加载HTML

- (void)loadWebData{

    NSString *urlText = [self createURLString];
    [self.webView loadHTMLString:urlText baseURL:nil];

}

- (NSString *)createURLString{

    NSMutableString *urlString = [[NSMutableString alloc] initWithString:@"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n"];
    [urlString appendString:@"<html xmlns=\"http://www.w3.org/1999/xhtml\">\n"];
    [urlString appendString:@"<head>\n"];
    [urlString appendString:@"<meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\">\n"];

    [urlString appendString:@"<style type=\"text/css\">\n\
     *{margin:0;padding:0;}\n     table{cellSpacing:0;cellPadding:0;border-collapse:collapse;}\n     table th,table td{ border:1px solid #ccc;align:center;text-align:center;}\n     .table-head{background-color:#d31145;color:#fff;}\n     .table-body{width:100%;height:100%;}\n     .table-head table,.table-body table{width:100%;}\n     .table-body table tr:nth-child(2n+1){background-color:#e2e2e2;}\n     </style>\n"];

    [urlString appendString:@"</head>\n"];
    [urlString appendString:@"<title></title>\n"];
    [urlString appendString:@"<body style=\"width:100%\" width=\"100%\" height=\"100%\">\n"];

    if (self.dataSource.count!=0) {
        //[urlString appendString:@"<div class=\"table-body\">\n"];
        [urlString appendString:@"<table class=\"table-body\" id=\"content_table\" style=\"width:100%;\" cellSpacing＝\"0px\";cellPadding＝\"0px\";>\n"];
        //初始化表格的行
        for (int i=0; i<self.dataSource.count; i++) {
            [urlString appendString:@"<tr style=\"font-size:22px;\" onclick=\"clickRow(this);\">\n"];
            ThSalesOrderModel *model = [self.dataSource objectAtIndex:i];

            for (int i=0; i<6; i++) {
                if (i == 0) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"25%%\" style=\"padding:5px\">%@</td>\n",model.OrderDate]];
                }
                if (i == 1) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"25%%\" style=\"padding:5px\">%@</td>\n",model.deliverdate]];
                }
                if (i == 2) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"16.6%%\" style=\"padding:5px\">%@</td>\n",model.CustomerName]];
                }
                if (i == 3) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"16.6%%\" style=\"padding:5px\">%@</td>\n",model.SalesOrder]];
                }
                if (i == 4) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"16.6%%\" style=\"padding:5px\">%@</td>\n",model.Status]];
                }

                //actualCaseCount += [model.actqty doubleValue];
                //targetCaseCount += [model.target doubleValue];
            }
            [urlString appendString:@"</tr>\n"];
        }
        [urlString appendString:@"</table>\n"];
        [urlString appendString:@"</div>\n"];
    }else{
        [urlString appendString:@"<div\">\n"];
        [urlString  appendFormat:@"<span style=\"font-size:25px;display:block;text-align:center;margin-top:40px;color:#bbb;\">%@</sapn>",kTXT(@"NoData")];
        //[urlString appendString:@"</div>\n"];
    }

    [urlString appendString:@"</body>\n"];
    [urlString appendString:@"</html>\n"];
    [urlString appendString:@"     <script type=\"text/javascript\">\n\
     function clickRow (obj) {\n         var salesOrder = obj.childNodes[7].innerText;\n         var msg = \"push://\"+salesOrder;\n\
         //alert(msg);\n\
         loadURL(msg);\n     }\n     function loadURL (url) {\n         var iFrame;\n         iFrame = document.createElement(\"iFrame\");\n\
         iFrame.setAttribute(\"src\",url);\n\
         iFrame.setAttribute(\"style\",\"display:none\");\n\
         iFrame.setAttribute(\"height\",\"0px\");\n\
         iFrame.setAttribute(\"width\",\"0px\");\n\
         iFrame.setAttribute(\"frameborder\",\"0\");\n\
         document.body.appendChild(iFrame);\n         //移除iFrame\n\
         iFrame.parentNode.removeChild(iFrame);\n         iFrame = null;\n     }\n     </script>\n     "];
    NSLog(@"生成的HTML字符串是:%@",urlString);

    return urlString;
}

3.效果截图。（下图中的表格头部和表格内容是两个WebView分别加载两个HTML,然后相同列的比例设置相同就可以对齐了。同时表格内容向上滚动的时候，表头不会消失,类似于TableView的Header悬停效果）

但是以上方法并不适用于所有的情况，当td中的内容太多的时候，表格就会乱掉。

这个表格和上面的表格的构造基本相同，表头和内容分别使用两个WebView进行加载两个HTML的Table，然后td的宽度设置成百分比，结果并不像我们想的那样美好，表格的内容错乱了。。。

经过仔细的思考，我认为是泰国人的名字太长，换行的方式是按整个单词换行，我们可以修改下换行的方式。修改后的代码：（修改的部分我加了深灰的背景）

- (void)loadWebData{
    [SVProgressHUD showWithStatus:kTXT(@"IMLoading")];
    NSString *urlText = [self createURLString];
    [self.webView loadHTMLString:urlText baseURL:nil];
    //刷新底部的Table
    //[self loadBottomData];

}

- (NSString *)createURLString{

    NSMutableString *urlString = [[NSMutableString alloc] initWithString:@"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n"];
    [urlString appendString:@"<html xmlns=\"http://www.w3.org/1999/xhtml\">\n"];
    [urlString appendString:@"<head>\n"];
    [urlString appendString:@"<meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\">\n"];
    /*
     [urlString appendString:@"<style type=\"text/css\">     *{margin:0;padding:0;}     table{cellSpacing:0;cellPadding:0;border-collapse:collapse;}     table th,table td{ border:1px solid #ccc;align:center;text-align:center;}     .table-head{background-color:#d31145;color:#fff;}     .table-body{width:100%;height:1200px;overflow-y:scroll;}     .table-head table,.table-body table{width:100%;}     .table-body table tr:nth-child(2n+1){background-color:#e2e2e2;}     </style>"];
     */

    //if (kGlobal.isIPhone6) {
        [urlString appendString:@"<style type=\"text/css\">\n\
         *{margin:0;padding:0;}\n         table{cellSpacing:0;cellPadding:0;border-collapse:collapse;}\n         table th,table td{ border:1px solid #ccc;align:center;text-align:center;}\n         .table-head{background-color:#d31145;color:#fff;}\n         .table-body{width:100%;height:100%;overflow-y:scroll;}\n         .table-head table,.table-body table{width:100%;}\n         .table-body table tr:nth-child(2n+1){background-color:#e2e2e2;}\n         </style>\n"];

    [urlString appendString:@"</head>\n"];
    [urlString appendString:@"<title></title>\n"];
    [urlString appendString:@"<body style=\"width:100%;max-width:100%;overflow:hidden;\" width=\"100%\" height=\"100%\">\n"];

    if (self.targetDataSource.count!=0) {
        [urlString appendString:@"<table style=\"width:100%;max-width:100%;table-layout:fixed;word-break:break-all;\" cellSpacing＝\"0px\";cellPadding＝\"0px\";>\n"];

        self.actualCaseCount = 0;
        self.targetCaseCount = 0;

        //初始化表格的行
        for (int j=0; j<self.targetDataSource.count; j++) {
            [urlString appendString:@"<tr style=\"font-size:22px;width:100%;\">\n"];
            ThCustomerTargetModel *model = [self.targetDataSource objectAtIndex:j];

            for (int i=0; i<6; i++) {
                if (i == 0) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"20%%\" style=\"padding:5px\">%@(%@)</td>\n",model.CustomerName,model.CustomerID]];
                }
                if (i == 1) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"20%%\" style=\"\">%@</td>\n",model.YearAndMonth]];
                }
                if (i == 2) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"20%%\" style=\"\">%@</td>\n",model.LastYearActualCase]];
                }
                if (i == 3) {
                    [urlString appendString:[NSString stringWithFormat:@"<td width=\"20%%\" style=\"padding:0px;font-size:22px;\" onclick=\"textOutClick(this);\"><input type=\"text\" style=\"padding:0px;margin:0px;width:95%%;height:60px;font-size:22px;\" onclick=\"textOnFocus(this)\" value=\"%@\" /></td>\n",model.ThisYearTargetCase]];
                }
                if (i == 4) {
                    //if ([model.ThisYearTargetCase isEqualToString:@""]||(model.ThisYearTargetCase == nil)) {
                        [urlString appendString:@"<td width=\"20%\" name=\"checkCell\" style=\"font-size:22px;\" onclick=\"checkOneCell(this);\"><input type=\"checkbox\" onclick=\"checkOneBox(this);\"></td>\n"];
                    //}
                }
            }
            [urlString appendString:@"</tr>\n"];
        }

        [urlString appendString:@"</table>\n"];
    }else{
        self.actualCaseCount = 0;
        self.targetCaseCount = 0;

        [urlString  appendFormat:@"<span style=\"font-size:25px;display:block;text-align:center;margin-top:40px;color:#bbb;\">%@</sapn>",kTXT(@"NoData")];
    }

    [urlString appendString:@"</body>\n"];
    [urlString appendString:@"</html>\n"];
    [urlString appendFormat:@"<script type=\"text/javascript\">"];
    [urlString appendFormat:@"\n     function selectedAll(){\n         var items = document.getElementsByName(\"checkCell\");\n\
         for (var i = 0; i < items.length; i++) {\n             items[i].firstChild.checked = true;\n         }\n     }\n     function deselectedAll(){\n         var items = document.getElementsByName(\"checkCell\");\n\
         for (var i = 0; i < items.length; i++) {\n             items[i].firstChild.checked = false;\n         }\n     }\n     //选中一个td,弹出的信息提示格式:row_index_Selected\n\
     function checkOneCell(obj){\n         var totalCheckbox = obj.firstChild;\n         var msg = \"thpush://row_\";\n\
         if (totalCheckbox.checked) {\n             totalCheckbox.checked = false;\n             msg += obj.parentNode.rowIndex+\"_0\";\n\
         }else{\n             totalCheckbox.checked = true;\n             msg += obj.parentNode.rowIndex+\"_1\";\n\
         }\n         //alert(msg);\n\
         loadURL(msg);\n     }\n     function checkOneBox(e){\n         var superNode = e.parentNode;\n         if (e.checked == true) {\n             e.checked = false;\n         }else{\n             e.checked = true;\n         }\n         var e = window.event || e;\n         e.cancelBubble = true;\n         //手动传播事件\n\
         checkOneCell(superNode);\n     }\n     function loadURL (url) {\n         var iFrame;\n         iFrame = document.createElement(\"iFrame\");\n\
         iFrame.setAttribute(\"src\",url);\n\
         iFrame.setAttribute(\"style\",\"display:none\");\n\
         iFrame.setAttribute(\"height\",\"0px\");\n\
         iFrame.setAttribute(\"width\",\"0px\");\n\
         iFrame.setAttribute(\"frameborder\",\"0\");\n\
         document.body.appendChild(iFrame);\n         //移除iFrame\n\
         iFrame.parentNode.removeChild(iFrame);\n         iFrame = null;\n     }\n     //点击<td>触发的方法\n\
     function textOutClick(obj){\n         //获得里面text的值\n\
         var text = obj.childNodes[0].value;\n         var msg = \"thpushone://\";\n\
         msg += \"text_\"+text+\"_row_\"+obj.parentNode.rowIndex;\n\
         //alert(msg);\n\
         loadURL(msg);\n     }\n     //点击<text>触发的方法\n\
     function textOnFocus(obj){\n         var superNode = obj.parentNode;\n         var e = window.event || obj;\n         e.cancelBubble = true;\n         //手动传播事件\n\
         textOutClick(superNode);\n     }\n    "];

    [urlString appendFormat:@"</script>"];

    //NSLog(@"生成的HTML字符串是:%@",urlString);

    return urlString;
}

最后显示的结果如下：

最后注明一个小知识：

如何设置WebView的高度，让WebView适应加载内容的高度，达到加载内容多高，WebView就是多高的一个效果？

方法是：在WebView的webViewDidFinishLoad代理方法中去设置WebView的高度。

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    NSUInteger tag = webView.tag - webViewTag;

    if (tag == 1) {
        CGRect frame = webView.frame;
        frame.size.width = kAllWidth;
        frame.size.height = 1;
        webView.frame = frame;
        frame.size.height = webView.scrollView.contentSize.height;
        webView.frame = frame;
        webView.scrollView.scrollEnabled = NO;
    }
｝

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #703daa }
span.s1 { }

时间： 2024-11-06 22:32:02

UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开的相关文章

xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

系列目录    [已更新最新开发文章,点击查看详细] 在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的效果.代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>xViewer</title> 5 <meta http-equiv="content-type" content=&

在UIWebView中加载的HTML所触发的事件通过OC方法响应

前段时间在做项目时,在UIWebView加载的Html中点击了一个区域需弹出拍照界面,可是根据业务的不同情况,区域的位置是不同的.我考虑了多种方案,最后还是觉得这个通过“桥梁”用OC方法来处理对应节点的触发事件更为直接和方便. 工具类:WebViewJavascriptBridge  顾名思义,此类就像OC与JS的桥梁,可以使JS的事件与OC的方法相关联. WebViewJavascriptBridge包含一个类实例方法,入参是委托对象. 有一个委托方法,此方法是用来接受到html点击事件返回的

ios网络学习------4 UIWebView的加载本地数据的三种方式

UIWebView是IOS内置的浏览器,可以浏览网页,打开文档  html/htm  pdf   docx  txt等格式的文件.  safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): - (void)viewDidLoad { [super viewDidLoad]; [self setupUI]; NSString *path = [[NSBund

ArcGIS API for Silverlight中加载Google地形图（瓦片图）

原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS API for Silverlight中加载Google地 形图.先上一个图,初步制作,待后续继续改进 ArcGIS API for Silverlight 中的ArcGISTiledMapServiceLayer图层,继承自TiledMapServiceLayer.如果想实现自己的缓存地图图 层

.net core中加载lua脚本的类库: MoonSharp

前言 MoonSharp是一个支持C#调用lua脚本的类库,支持.net, .net core, mono, unity,因此在.net core中也能够使用,而且加载和调用lua也很方便简单: 官网:http://www.moonsharp.org/ 源码:https://github.com/xanathar/moonsharp nuget:PM> Install-Package MoonSharp 使用 加载脚本 1 string scriptCode = @" 2 sum = 0

Spring中加载xml配置文件的六种方式

因为目前正在从事一个项目,项目中一个需求就是所有的功能都是插件的形式装入系统,这就需要利用Spring去动态加载某一位置下的配置文件,所以就总结了下Spring中加载xml配置文件的方式,我总结的有6种, xml是最常见的spring 应用系统配置源.Spring中的几种容器都支持使用xml装配bean,包括: XmlBeanFactory,ClassPathXmlApplicationContext,FileSystemXmlApplicationContext,XmlWebApplicati

在HTML文件中加载js

js加载只分为两种: 1.全局js,放在<head>标签里面,整个页面很多都用到的,它是优先加载的. 2.局部js,放在</html>结束标签以内的任何位置,它是第二加载的. 在HTML文件中加载js,布布扣,bubuko.com

unreal3对象属性自动从配置文件中加载的机制

unrealscript中有两个与属性自动配置相关的关键字: config/globalconfig 当把它们应用于属性时,对象在创建后,该属性的初始值会被自动设置为相对应ini文件中的值. 举例来说,如有一个类: class HNet extends Object config(game) native(net); //var globalconfig string host;var config string host; function test() { `Log("HNet test,

cocos2dx中加载图片资源的方法,和从内存中获取已经加载的图片资源的方法

游戏中通常需要将常用的资源如:声音,图片,plist文件,提前加载进内存,以加快游戏的流畅度 1.预加载声音: SimpleAudioEngine::getInstance()->preloadBackgroundMusic("boom.mp3"); 加载之后就可以直接播放:SimpleAudioEngine::getInstance()->playBackgroundMusic("boom.mp3"); 2.预加载图片资源: 图片资源的加载分为同步加载