前端小知識集合

jsp中:
<%--日期選擇框,日期區間,editable 輸入框是否可編輯--%>
<input id="createTimeStart" name="createTimeStart" class="easyui-datebox" data-options="editable:false"> 
- <input id="createTimeEnd" name="createTimeEnd" class="easyui-datebox" data-options="editable:false">

<%--分隔橫線--%>
<div class="datagrid-toolbar"></div>

<%--分隔豎線--%>
<div class="datagrid-btn-separator" />

<%--easyUi中combobox的禁用和啓用--%>
$('#combobox類型的輸入框的Id').combobox('enable');   //可用 
$('#combobox類型的輸入框的Id').combobox({disabled:false});   //沒有效果(可以打開下拉,但是不能選擇)
$('#combobox類型的輸入框的Id').combobox('disable');   //不可用(有效)
$('#combobox類型的輸入框的Id').combobox({disabled:true});   //不可用(有效)
$('#combobox類型的輸入框的Id').combobox('clear');   //清除 combobox 值.
$('#combobox類型的輸入框的Id').combobox('setValues', '001'); //設置 combobox 值.

<%--重置表單--%>
document.getElementById("form的id").reset();

<%--input輸入框設置長度無效或者跨列無效--%>
<tr>
  <td align=right width="100px">備註:</td>
  <td align=left colspan="5">
  <input class="easyui-textbox" id="remarkBatchUpdate" name="remarkBatchUpdate"style="width:665px;" maxlength=100/>
  </td>
</tr>

//除了要用colspan跨列外,還要用style="width:665px;",否則:
//1.只用colspan,會導致輸入框顯示的長度不變,如下圖:

 


//2.只用style="width:665px;",會導致表格的第二列很長,然後格式亂掉,如下圖:

 

 

 

 

<%--input輸入框設置輸入內容長度無效--%>
maxlength=100;//限制輸入內容長度無效時,使用data-options="multiline:true,validType:'length[0,350]'"進行一個校驗提醒

<%--表格橫向滾動條設置--%>
<div class="jqGrid_wrapper">

//設置class爲autoWidth,自動適應瀏覽器窗口的調整,否則,表格的大小將不隨瀏覽器窗口大小而改變,導致有些列無法顯示
   <table id="vehicleBillTable" class="autoWidth"></table>
<div id="pager"></div>

 

 

<input type="hidden" id="inputIdDR" name="inputId">

 


<%--easyui輸入框的非空及格式校驗--%>
<input class="easyui-numberbox" id="feeBridgeAdd" name="feeBridgeAdd" style="width:150px;"
     data-options="required:true, precision: 2, max:99999999.99, min:0.00"/>
//easyui-numberbox 必須是數字
//data-options 用於描述需要校驗的項
//required:true 非空
//precision 精度

<%--easyui輸入框的id和name的區別--%>
<input type="hidden" id="inputIdDR" name="inputId">
說明:id用於js中獲取輸入框的值;
   name爲java後臺或者說request中獲取變量的名稱;
   所以二者寫成一樣時,前端和後臺不會出現參數不對的情況
  
  

js中:
var config = {
url:App.contextPath + '',//路徑
autowidth: true,//作用與jsp中的//作用與jsp中的class="autoWidth"一樣,此行可省略
//設置爲true時,列會按長度比例縮放,無法出現滾動條,並且列中的數據會展示不全

shrinkToFit: false,
colNames: ['操作'],//列名
colModel: [{name: 'option', index: 'option', align: 'center', width: 80, sortable: false, formatter : operate},],//數據
rowNum : 15,//每頁顯示數量
rowList : [ 15, 30, 50 ],//每頁可選顯示數量
pager : '#pager',
sortname:'Report_Dttm',
sortorder:'desc',

//分頁

jsonReader默認設置:


 1 jsonReader : {
 2     root: "rows",    // json中代表實際模型數據的入口,即:要顯示的數據
 3     page: "page",    // json中代表當前頁碼(直接使用page就好,配置成自己定義的會更麻煩)
 4     total: "total",    // json中代表頁碼總數,即:共幾頁
 5     records: "records", // json中代表數據行總數,即:總共要顯示的數量
 6     repeatitems: true, // 如果設爲false,則jqGrid在解析json時,會根據name來搜索對應的數據元素(即可以json中元素可以不按順序);而所使用的name是來自於colModel中的name設定。
 7     cell: "cell",
 8     id: "id",
 9     userdata: "userdata",
10     subgrid: {
11         root:"rows", 
12         repeatitems: true, 
13         cell:"cell"
14     }
15 };
jQuery("#table").jqGrid($.extend(JQGRID_BASE_CONFIG, config));

<%--修改tomcat默認編碼方式--%>
找到tomcat下的conf/server.xml文件中的如下代碼:   
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
這段代碼規定了Tomcat監聽HTTP請求的端口號等信息。
可以在這裏添加一個屬性:URIEncoding,將該屬性值設置爲UTF-8,即可讓Tomcat(默認ISO-8859-1編碼)以UTF-8的編碼處理get請求。
修改完成後:
<Connector port="8080"  protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" />

<%--JavaScript中==和===的區別--%>
假設給定 x=1:
運算符  描述  例子
==  等於              x==8 爲 false
===  全等(值和類型)  x===1 爲 true;x==="1" 爲 false

<%--去掉jqgrid的複選框--%>
multiselect: false,//去掉jqgrid的複選框

if (!$('#formId').form('validate')) {//表單校驗,easyui自帶
showMessageAlter('提示', '數據格式有誤,請正確填寫!');
return;
}

/**獲取當前日的前一天日期*/
function getYesterday(){
var now = new Date(new Date() - 24 * 3600 * 1000);
var year = now.getFullYear();
var month = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1): now.getMonth() + 1;
var day = now.getDate() < 10 ? "0" + now.getDate(): now.getDate();
var nowStr = year + "-" + month + "-" + day;
return nowStr;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章