BlogJava-云自无心水自闲-随笔分类-JQueryhttp://www.blogjava.net/usherlight/category/32679.html天平山上白云泉，云自无心水自闲。何必奔冲山下去，更添波浪向人间！zh-cnWed, 12 Oct 2016 14:36:19 GMTWed, 12 Oct 2016 14:36:19 GMT60Jquery UI datepicker 结合使用 bootstrap glyphicon http://www.blogjava.net/usherlight/archive/2016/10/10/431879.html云自无心水自闲云自无心水自闲Mon, 10 Oct 2016 11:57:00 GMThttp://www.blogjava.net/usherlight/archive/2016/10/10/431879.htmlhttp://www.blogjava.net/usherlight/comments/431879.htmlhttp://www.blogjava.net/usherlight/archive/2016/10/10/431879.html#Feedback0http://www.blogjava.net/usherlight/comments/commentRss/431879.htmlhttp://www.blogjava.net/usherlight/services/trackbacks/431879.html

1, 先定义一个input, 做为datepicker的容器。
<input type='text' class="form-control" id="dateTo" name="dateTo" required/>

2, 在后面加上glyphicon, 注意关键是label 中的for的id需要是前面定义的容器的id, 这样点击glyphicon的时候就会触发弹出日期选择框。
<label for="dateTo" class="input-group-addon"><span class="glyphicon glyphicon-time"></span></label>

云自无心水自闲 2016-10-10 19:57 发表评论
]]>prototype版的table filterhttp://www.blogjava.net/usherlight/archive/2010/07/28/327294.html云自无心水自闲云自无心水自闲Wed, 28 Jul 2010 03:02:00 GMThttp://www.blogjava.net/usherlight/archive/2010/07/28/327294.htmlhttp://www.blogjava.net/usherlight/comments/327294.htmlhttp://www.blogjava.net/usherlight/archive/2010/07/28/327294.html#Feedback1http://www.blogjava.net/usherlight/comments/commentRss/327294.htmlhttp://www.blogjava.net/usherlight/services/trackbacks/327294.htmljquery有一个很方便的插件UI Table Filter可以根据输入的内容隐藏显示表格中相应的数据行。
因为目前使用的tapestry捆绑的是prototype，所以就自己写了一个类似的插件。

<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="javaScript">
 Event.observe(window, 'load', function() {
  Event.observe('filter', 'keyup', filterTable);
 });
 function filterTable() {
  var filterCaseElement = document.getElementById('filterCase');
  var caseSensitive = filterCaseElement.checked;
  
  $$('tr').each(function(trElement, ind) {
   var val = $('filter').value;
   
   if ( ! caseSensitive ) {
    val = val.toLowerCase();
   }
       
   trElement.childElements().each(function(tdElememt) {
     var tdText = tdElement.innerText;
    if ( ! caseSensitive ) {
     tdText = tdText.toLowerCase();
    }
    if (tdText.include(val)) {
     trElement.show();
    } else if ( ind > 0 ) {
     trElement.hide();
    }
   });
  });
 }
</script>

</head>

 <body>
  filter: <input type="text" id="filter" name="filter"/> <input type="checkbox" id="filterCase" onchange="javaScript:filterTable();"/> Case-Sensitive
  <table border="1">
   <thead>
    <tr>
     <th>name</th>
     <th>column1</th>
     <th>column2</th>
     <th>column3</th>
     <th>column4</th>
     <th>column5</th>
     <th>column6</th>
    </tr>
   </thead>
   <tr>
    <td>TEST</td>
    <td>00150002331</td>
    <td>238156</td>
    <td>075</td>
    <td>001</td>
    <td>172.16.14.20</td>
    <td>1-1-05</td>
   </tr>
   <tr>
    <td>TEST-2</td>
    <td>00150002332</td>
    <td>238157</td>
    <td>075</td>
    <td>002</td>
    <td>172.16.14.21</td>
    <td>1-1-05</td>
   </tr>
   <tr>
    <td>TEST</td>
    <td>00150002333</td>
    <td>238158</td>
    <td>075</td>
    <td>003</td>
    <td>172.16.14.23</td>
    <td>1-1-05</td>
   </tr>
   <tr>
    <td>TEST</td>
    <td>00150002341</td>
    <td>238159</td>
    <td>075</td>
    <td>004</td>
    <td>172.16.14.24</td>
    <td>1-1-05</td>
   </tr>
   <tr>
    <td>TEST</td>
    <td>00150002339</td>
    <td>238186</td>
    <td>075</td>
    <td>006</td>
    <td>172.16.14.26</td>
    <td>1-1-06</td>
   </tr>
  </table>
 </body>
  </html>

如果页面中多个表格，而只需要对其中的一个表格的数据进行过滤的话，简单地把其中：$$('tr').each(function(ele, index) 改成 $$('#tableId, tr').each(function(ele, index) 就行了，其中的tableId就是表格的id

云自无心水自闲 2010-07-28 11:02 发表评论
]]>我的struts2项目性能调优三步曲http://www.blogjava.net/usherlight/archive/2008/07/01/211869.html云自无心水自闲云自无心水自闲Tue, 01 Jul 2008 05:33:00 GMThttp://www.blogjava.net/usherlight/archive/2008/07/01/211869.htmlhttp://www.blogjava.net/usherlight/comments/211869.htmlhttp://www.blogjava.net/usherlight/archive/2008/07/01/211869.html#Feedback7http://www.blogjava.net/usherlight/comments/commentRss/211869.htmlhttp://www.blogjava.net/usherlight/services/trackbacks/211869.html 一，根据struts2官方的性能调优说明进行了一些参数的修改。
http://struts.apache.org/2.x/docs/performance-tuning.html
http://cwiki.apache.org/WW/performance-tuning.html

Turn off logging and devMode.(关闭logging和Devmode)
这个当然没问题，但是全部关闭logging不现实，我只是关闭了struts2相关package的logging

Do not use interceptors you do not need.
把struts.xml中不需要的interceptor统统删除

Use the correct HTTP headers (Cache-Control & Expires).
不确定应该如何修改

Copy the static content from the Struts 2 jar when using the Ajax theme (Dojo) or the Calendar tag.
关于这点，后面会提到

Create a freemarker.properties file in your WEB-INF/classes directory.
照做

Create the freemarker.properties file and add the following setting (or whatever value you deem fitting):
template_update_delay=60000
照做

Enable Freemarker template caching
As of Struts 2.0.10, setting the property struts.freemarker.templatesCache to true will enable the Struts internal caching of Freemarker templates. This property is set to false by default.
照做

进行上述修改后，发现页面打开的速度并没有明显的提高.

二，此时我已经基本锁定网页打开速度慢的原因与ajax(或者说是dojo)有关。因为dojo的js库大概有450K左右，先尝试使用gzip压缩javascript，减小传输量，看能否加快页面的加载速度
在Tomcat的server.xml的connector中添加如下配置，激活gzip功能
 compression="on"
 compressionMinSize="2048"
 noCompressionUserAgents="gozilla, traviata"
 compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript"
进行上述修改后，发现页面打开的速度还是没有明显的提高.

三，经过上述两个实验，觉得应该是struts2所封闭的dojo的性能问题了。于是引入JQuery.
JQuery的js文件最小是55K, gzip后应该更小，页面的响应速度明显改善（一个数量级以上的提高），主要原因在于与服务器交互的处理上极大地提升了效率。而且页面处理代码更加简洁明了。

最后，我删除了所有的<s:head theme="ajax"/>和 <s:head/>(如果页面中加入<s:head />，那么在Struts2生成的html中后包含dojo.js)，使用JQuery来完成所有的Ajax和javascript功能。



云自无心水自闲 2008-07-01 13:33 发表评论
]]>