EasyUI-DataGrid編輯時出現下拉列表框選擇,同時修改其它列的值
//初始化表格 $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field) { col.editor = null; } } $(this).datagrid('beginEdit', param.index); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing() { if (editIndex == undefined) { return true } if ($('#tb_Details').datagrid('validateRow', editIndex)) { $('#tb_Details').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field) { if (endEditing()) { $('#tb_Details').datagrid('selectRow', index) .datagrid('editCell', { index: index, field: field }); editIndex = index; } }
,接下來就是對具體的操作了
//初始化表格 function IntideTable() { $("#tb_Details").datagrid({ url: "../OfficePurchase.mvc/OfficePurchaseApplyDetails", width: "auto", height: "auto", fitColumns: true, singleSelect: false, onClickCell: onClickCell, rownumbers: true, //行號 frozenColumns: [[ { field: "ck", checkbox: true } ]], columns: [[ { field: "ID", title: "ID", hidden: true }, { field: "SuppliesName", title: "用品名稱", width: 100, align: "left" }, { field: "Spec", title: "規格", width: 100, align: "left" }, { field: "ModelType", title: "型號", width: 100, align: "left" }, { field: "ProductionPlace", title: "產地", width: 100, align: "left" }, { field: "StaticNumber", title: "當前庫存", width: 50, align: "left" }, { field: "ApplyNumber", title: "申請數量", width: 50, align: "left", editor: { type: 'numberbox', options: { precision: 0, min: 1 } } }, { field: "Units", title: "單位", width: 50, align: "left" }, { field: "Remarks", title: "備註", width: 100, align: "left", editor: { type: 'combobox', options: { valueField: 'LicensePlate', textField: 'LicensePlate', url: '/VehicleInsurance.mvc/GetAllPlanteG', onSelect: function (rec) { $("#tb_Details").datagrid("acceptChanges");//提交修改的資料 }, required: true } } } ]], onAfterEdit: function (rowIndex, rowData, changes) {//編輯完觸發 var row = $('#tb_Details').datagrid('getData').rows[rowIndex]; row["Units"] = changes["Remarks"]; //refreshRow $('#tb_Details').datagrid('refreshRow', rowIndex); }, toolbar: [ { text: "新增", iconCls: "icon-add", handler: function () { JsDraftSave(); openOfficeList(); } }, "-", { text: "刪除", iconCls: "icon-remove", handler: function () { DelGridData(); } } ], queryParams: { ApplyNo: "@ViewBag.ApplyNo" } }); }
值得注意的就是,程式碼中的
tb_Details是HTML元素中的Table標籤
相關推薦
EasyUI-DataGrid編輯時出現下拉列表框選擇,同時修改其它列的值
首先是進行表格式的初始化,主要是為了可以進行編輯//初始化表格 $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function ()
MFC Combox的使用、不出現下拉表框
1.向combox中新增內容 CString stringCOM[16];//定義了一個CString陣列 //為ComBox新增內容 for (int i = 0; i <= cntCOM; i++) { listCom1.AddString(stringCOM[
easyui datagrid 編輯行繫結combogrid並實現下拉賦值
1.第一步初始化 $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function (container, options) {
Easyui datagrid 編輯結束時combobox顯示value而不顯示text
在呼叫datgrid編輯結束時 $('#dg').datagrid('endEdit', editIndex); datagrid的combobox會顯示出value, 這是因為easyui在我們編輯結束時為了方便使用更改的值而記錄下了combobox的value而不
css導航欄鼠標hover的時候就出現下拉菜單
har 下拉 lang 位置 set bili :hover 元素 div 代碼如下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="
JavaScript實現全選選項框的功能和鼠標劃入出現下拉框的功能--JavaScript實例集錦(初學)
bubuko 技術分享 選項 round div ++ length javascrip brush 有一些論壇,文章後臺編輯都會出現選擇框的操作。 1.實現選項框全選和取消全選的功能: 代碼實現: <!DOCTYPE html> <html>
EasyUI DataGrid 編輯單元格
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
easyui中實現多個下拉列表聯動
先看下原始碼 <script type="text/javascript" charset="UTF-8"> $(function() { var provinceId = $('#provinceId').combobox({ url : 'p
EasyUi的ComboBox(下拉列表框)
關於EasyUi的下拉框顯示值 對於EasyUi下拉框顯示資料,相信很多大神都知道是怎麼回事,但是對於我們這樣剛入門的菜鳥來說,還是有問題的,在百度上面找了一下,沒找到具體的答案,現在
easyui Datagrid編輯經驗
可編輯表格使用經驗分享(持續更新) 對於Easyui的可編輯表格,個人也是較為陌生的,儘管在操作方式上可能比使用表單修改的方式便捷,但是可編輯表格對程式碼質量的要求往往更高一些,不熟練的話,容易出現這樣或者那樣的問題,本篇文章就自己使用的經歷做一些總結。 相關介面方
Android 之PopupWindow彈出下拉列表
1. 首先看看main.xml佈局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.
EasyUI ComboBox(下拉列表框)
ComboBox(下拉列表框) 擴充套件自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫預設值物件。 下拉列表框顯示一個可編輯文字框和下拉式列表,使用者
Easyui---datagrid編輯單元格及獲取編輯前後資料
編輯之前 編輯之後 程式碼實現 <div> <table id="dg" title="Cell Editing in DataGrid" style="widt
JQuery EasyUI combobox(下拉列表框)
下拉列表框 繼承 $.fn.combo.defaults. 重寫 $.fn.combobox.defaults. 組合框顯示一個可編輯的文字框和下拉列表,使用者選擇一個或多個值。使用者可以直接輸入文字到頂部的列表,或選擇一個或多個當前值列表。 依賴 combo應用例
下拉列表框【安卓3】
pan activity border cin left 資源 pro 內容 1.0 Spinner(下拉列表框) 方法 描述 CharSequence getPrompt () 取得提示文字 void setPrompt(CharSeque
下拉列表左右選擇案例
獲取 是否 cti 全部 options itl 標簽 cli pan 單個添加的操作1、得到select裏面的option -getElementsByTagName()返回是數組 -遍歷數組,得到每一個option 2、判斷opti
javascript 向下拉列表框select添加選項option
下拉 select cnblogs ntb rip cti 下拉列表框 nbsp span 1 var select= document.getElementById("selectid"); 2 var objOption = document.createElemen
jQuery學習(七)——使用JQ完成下拉列表左右選擇
谷歌瀏覽器 opp 榮耀 學習 華為 style 1.8 script cname 1、需求:實現以下功能 2、步驟分析: 第一步:確定事件(鼠標單擊事件click) 第二步:獲取左側下拉列表被選中的option($(“#left option:selected”)) [
省市區、民族下拉列表框
文字 tro -c 提示信息 ons ati doc nbsp 級聯 省市縣插件PCASClass.js的基本使用方法 <select id="Province" name="Province"></select> <select id="C
jq自定義多選下拉列表框
多選 img 插件 國家 http 分享 class 下拉 blog 多選選擇國家插件 https://gitee.com/richard1015/dropDownList jq自定義多選下拉列表框