1.當輸入框發生改變時的方法。

$("#member").on('input',function(){...} );

2.數據保留兩位小數。

price=price.toFixed(2)

3.改變價格（多條同樣的標簽，例如下面例子：）

實現方法：

//價格改變 function changePrice(){//統計改變后的總價var price = 0;$("input[name$='.number']").each(function(){var realprice = parseFloat($(this).parent().next().children().first().val());if(isNaN(realprice)){price = price + 0;}else{price = price+parseInt($(this).val())*realprice;}});//訂單總額price=price.toFixed(2);$("#price").val(price); }

4.datagrid編輯框（numberbox）使用例子：

{field:'realPrice',title:'單價',sortable:true,width:80,editor: { type: 'numberbox', options: { max:100000,precision:2} }, },

5.datagrid操作欄的顯示

{field:'opt',title:'操作',width:50,align:'center',formatter:function(value,rec,index){ var d = '<a href="#" mce_href="#" οnclick="delMainItem(\''+ index +'\')">刪除</a> '; return d; }}

6.datagrid開始編輯和結束編輯：

//主項目信息的選中后的操作 ,開始編輯function selectMainItem(index){endEditing();$('#productList_selected').datagrid('beginEdit', index);var ed =$('#productList_selected').datagrid('getEditor', {index:index,field:'price'});$(ed.target).focus();editIndex = index;}//結束表格編輯function endEditing(){if (editIndex == undefined){return true}if ($('#productList_selected').datagrid('validateRow', editIndex)){var ed_realPrice = $('#productList_selected').datagrid('getEditor', {index:editIndex,field:'price'});var ed_number = $('#productList_selected').datagrid('getEditor', {index:editIndex,field:'number'});var ed_supplier = $('#productList_selected').datagrid('getEditor', {index:editIndex,field:'supplier'});var ed_productDate = $('#productList_selected').datagrid('getEditor', {index:editIndex,field:'productDate'});var ed_validity = $('#productList_selected').datagrid('getEditor', {index:editIndex,field:'validity'});var realPrice = $(ed_realPrice.target).numberbox('getValue');var number = $(ed_number.target).numberbox('getValue');var supplier = $(ed_supplier.target).combobox('getValue');var productDate = $(ed_productDate.target).datebox('getValue');var validity = $(ed_validity.target).text('getValue');$('#productList_selected').datagrid('getRows')[editIndex]['realPrice'] = realPrice;$('#productList_selected').datagrid('getRows')[editIndex]['number'] = number;$('#productList_selected').datagrid('getRows')[editIndex]['supplier'] = supplier;$('#productList_selected').datagrid('getRows')[editIndex]['productDate'] = productDate;$('#productList_selected').datagrid('getRows')[editIndex]['validity'] = validity;$('#productList_selected').datagrid('endEdit', editIndex);editIndex = undefined;changePrice();return true;} else {return false;}}

?

?

7.清空datagrid數據

function clearAllItemByType(){var rows = $('#itemList').datagrid('getRows');$.each(rows, function (index, item){$('#itemList').datagrid('deleteRow', 0);});}

8.datagrid計算價格

var rowsOfSelected = $('#itemList_selected').datagrid('getRows');var price = 0;$.each(rowsOfSelected, function (index, item){var realPrice = item.realPrice;var number = item.number;if(realPrice != undefined && number != undefined){if(IsNum(realPrice) && IsNum(number)){if(realPrice>=0 && number>=0){//為正數 price += realPrice * number;}}}});

?9.datagrid編輯器與combobox的結合使用

//供貨商var supplier;//獲得供應商下拉框 function getSupplier(){var url = "inStockController.do?getSupplier";$.ajax({type : 'POST',url : url,async: false,success : function(data) {var d = $.parseJSON(data);if (d.success) {supplier=d.msg;}},error:function (xhr, ajaxOptions, thrownError){}});}//字符串轉化為json格式 var json_supplier=eval(supplier);function unitformatter(value, rowData, rowIndex) {if (value == 0) {return;}for (var i = 0; i < json_supplier.length; i++) {if (json_supplier[i].id == value) {return json_supplier[i].name;}}}{field:'supplier',title:'供應商',sortable:true,width:110,formatter: unitformatter,panelHeight: 'auto',editor: { type: 'combobox', options: {data: json_supplier, valueField: "id", textField: "name",panelHeight:"auto"}}},

編輯器combobox后臺代碼展示：

public AjaxJson getSupplier(HttpServletRequest req) {AjaxJson j = new AjaxJson();String type="";try {List<SupplierEntity> supplierList=systemService.getList(SupplierEntity.class);for (SupplierEntity suppliers : supplierList) {type += "{'id':'"+suppliers.getId()+"','name':'"+suppliers.getName()+"'},";}} catch (Exception e) {e.printStackTrace();logger.info(e.getMessage());systemService.addLog(e.getMessage(), Globals.Log_Type_OTHER, Globals.Log_Leavel_ERROR);}String floor = "["+type+"]";// 設置提示信息 j.setMsg(floor);return j;}

?

轉載于:https://www.cnblogs.com/changeQian/p/5169683.html

總結

以上是生活随笔為你收集整理的js编辑技术累积的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。