web 前端知识总结

一些简单的技能

2 . Echart多图联动

http://echarts.baidu.com/doc/example/mix8.html

3 . Jqgrid表格自适应长宽比

 $(window).resize(function(){
      $("#list2").setGridWidth($(window).width()-50);
});
  jqGridInitListJSON();//json数据格0式返回给jqgrid
  $("#list2").setGridWidth($(window).width()-50);

4 . Echart自适应长宽比

// 为echarts对象加载数据 
myChart.setOption(option); 
window.onresize = myChart.resize;

5、加一个CSS边框阴影、圆角

<div id="main" style="height:400px;box-shadow: 0 0 8px #000;;border-radius:5px;margin:0% 2%;"></div>

6、Echart图形左边和上间距

grid:{ x:100, y:100, },

7、POI Excel边框
参考文件：
- http://z3sm2012.iteye.com/blog/1446669

 style1.setBorderTop(HSSFCellStyle.BORDER_DOUBLE);
    style1.setBorderLeft(HSSFCellStyle.BORDER_DOUBLE);
    style1.setTopBorderColor(HSSFColor.GOLD.index);
    style1.setLeftBorderColor(HSSFColor.PLUM.index);
    cell1.setCellStyle(style1);

8、下拉框设置值

$("#selectGroup").val("30");
    $("#selectGroup")[0].selectedindex=3;
    var checkText = $("#selectGroup").find("option:selected").text("30天");
<select style="width:80px;" id='selectGroup' name="groupId" onChange="SelectFun(this)">
    <option value=''>请选择:</option>
    <option value='7'>7天</option>
    <option value='14'>14天</option>
    <option value='30'>30天</option>
</select>

9、Jqgrid 合计列的代码

footerrow:true,             //加这个标识
var rowNum=parseInt($(this).getGridParam("records"),10);
if(rowNum>0){    
    $(".ui-jqgrid-sdiv").show();
    var count=$(this).getCol("RESULT_COUNT",false,"sum"); 
    var task_count=$(this).getCol("TASK_COUNT",false,"sum"); 
    $(this).footerData("set",{"STATION_NO":"合计","TASK_COUNT":task_count,"RESULT_COUNT":count}); //将合计值显示出来
        }else{
                 $(".ui-jqgrid-sdiv").hide();
}

11、产生随机数的两种方法
- 方法一：

int r = (int)(Math.random()*100);//产生100以内的随机数
System.out.println(r);

• 方法二

Random rand = new Random(); //产生100以内的随机数
int number = rand.nextInt(100);
System.out.println(number);

12、 导出Excel的方法（JXLS）
- 参考文献（附有源码）：

http://blog.csdn.net/zdp072/article/details/30310473?utm_source=tuicool&utm_medium=referral

13、 MyDatePicker 隐藏清空按钮和皮肤设置
- 隐藏清空按钮<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>
- 皮肤设置<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/>

14、Icon图标下载网址

http://www.easyicon.net/iconsearch/Question%20mark/

15、如何将Markdown格式文件输出为PDF文件
1. 先输出为html文件
2. 利用Chorme 打印，选择更改，另存为PDF文件

16、Spring Bean的使用
参考文献：http://hehebendan.iteye.com/blog/649829

<bean id="DBAddress" class="com.mongodb.DBAddress">
        <constructor-arg index="0"><value type="java.lang.String">127.0.0.1</value></constructor-arg>
        <constructor-arg index="1"><value>27001</value></constructor-arg>
        <constructor-arg index="2"><value type="java.lang.String">mldn</value></constructor-arg>
</bean>
<bean id="MongoTim" class="com.mongodb.Mongo">
        <constructor-arg ref="DBAddress"></constructor-arg>
</bean>

17、Properties文件原生是不支持中文的，解决方法
安装：properdit
参考文献：

http://blog.sina.com.cn/s/blog_5f54f0be0101hb3r.html