easyui的datagrid的editor爲combobox,根據每一個row的屬性的不一樣,如何動態的設置每一個row的combobox的url
JSP中的元素定義:css
<th field="typeMaskValues" width="150" sortable="false" align="center" formatter="typeMaskFormatter" editor="{type:'combobox',
options:{
multiple:true,
required:true,
url:'iface/findTypeMaskList',valueField:'key',textField:'value',panelHeight:150,
//editable:false,
onHidePanel: onHidePanel,
onShowPanel:onShowPanel,
onChange:onChange,
onLoadSuccess:function(data){
zdyComboboxArray = data;
}
}}">類別掩碼
</th>
下拉框的各個函數的定義:html
/**
* 下拉麪板展開事件
*/
function onShowPanel(){
console.info("onShowPanel");
}
/**
* 下拉麪板選擇事件
*/
function onChange(){
console.info("onChange");
}
/**
* datagrid的複選框隱藏面板事件
*/
function onHidePanel(){
console.info("hidepanel");
var textField = $('.datagrid-editable-input').val();
//下拉框必選,不能爲空
if(comboboxValue.value && textField && textField!=comboboxValue.value){
//單選框
//var valueField = $('.datagrid-editable-input').next().next().val();
//複選框有多個input
var multipleInputs = $('.datagrid-editable-input').nextAll(':input');
var multipleInputsVal = new Array();
var j = 0;
for(var i=0;i<multipleInputs.length;i++){
var multipleInput = multipleInputs[i];
var multipleInputVal = multipleInput.value;
if(multipleInputVal){
multipleInputsVal[j] = multipleInputVal;
j++;
}
}
var row = comboboxValue.row;
row.typeMaskValues = multipleInputsVal;
row.typeMaskTexts = textField;
var options = {};
options.onAfterSubmit = afterSubmit;
_destroyCellEditor($(comboboxValue.id)[0],{index:comboboxValue.rowIndex,field:comboboxValue.field});
onAfterEditing(comboboxValue.rowIndex,row,comboboxValue.changes,comboboxValue.id,comboboxValue.url,new Array(),options);
endEditing(comboboxValue.id);//此行代碼讓編輯框被銷燬以後還可以再次打開編輯器(例如雙擊打開)
}else{
_destroyCellEditor($('#_list')[0],{index:_rowIndex,field:_field});
endEditing('#_list');
comboboxValue["data"] = comboboxValue.row;
afterSubmit(comboboxValue.rowIndex, comboboxValue.row, "",comboboxValue,comboboxValue.id);
}
_rowIndex = undefined;
_field = undefined;
_rowId = undefined;
comboboxValue = {};
}
爲可編輯的單元格設置邊框:jquery
//爲可編輯的單元格設置外邊框
//來自jquery.easyui.1.8.0.js的 function _4d8()方法
function _outerWidthOfEditable(target) {
var dc = $.data(target, "datagrid").dc;
dc.view.find("div.datagrid-editable").each(function () {
var _this = $(this);
var field = _this.parent().attr("field");
var col = $(target).datagrid("getColumnOption", field);
_this._outerWidth(col.width);
var ed = $.data(this, "datagrid.editor");
if (ed.actions.resize) {
ed.actions.resize(ed.target, _this.width());
}
});
}
單元格編輯函數:數組
//開啓編輯單元格狀態
function beginEditCell(target, options) {
// var opts = $.data(target, "datagrid").options;
// var tr = opts.finder.getTr(target, options.index);
// var row = opts.finder.getRow(target, options.index);
// //暫時還不知道該代碼的含義,忽略使用
// if (tr.hasClass("datagrid-row-editing")) {
// return;
// }
// tr.addClass("datagrid-row-editing");
_initCellEditor(target, options.index, options.field);
_outerWidthOfEditable(target);
// $.validateRow(target, options.index);暫時先不使用,不知道該方法做用
}
初始化表格編輯器:jsp
/**
* 初始化表格編輯器
*/
function _initCellEditor(target, _index, _field) {
var opts = $.data(target, "datagrid").options;
var tr = opts.finder.getTr(target, _index);
var row = opts.finder.getRow(target, _index);
tr.children("td").each(function () {
var cell = $(this).find("div.datagrid-cell");
var field = $(this).attr("field");
if (field == _field) {//找到與傳遞參數相同field的單元格
var col = $(target).datagrid("getColumnOption", field);
if (col && col.editor) {
var editorType, editorOp;
if (typeof col.editor == "string") {
editorType = col.editor;
} else {
editorType = col.editor.type;
editorOp = col.editor.options;
}
var editor = opts.editors[editorType];
if (editor) {
var html = cell.html();
var outerWidth = cell._outerWidth();
cell.addClass("datagrid-editable");
cell._outerWidth(outerWidth);
cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td></td></tr></table>");
cell.children("table").bind(
"click dblclick contextmenu",
function (e) {
e.stopPropagation();
});
$.data(cell[0], "datagrid.editor", {
actions: editor,
target: editor.init(cell.find("td"),
editorOp),
field: field,
type: editorType,
oldHtml: html
});
}
}
$('.datagrid-editable').css('height','auto');//設置包裹該editorde的div的樣式
$('.datagrid-editable-input').css("line-height","");//設置編輯框的樣式
tr.find("div.datagrid-editable").each(function () {
var field = $(this).parent().attr("field");
var ed = $.data(this, "datagrid.editor");
var val = row[field];
if(ed.type == 'combobox'){
//獲取編輯器的對應的元素的下拉框的屬性集合
var opts = $(ed.target).combobox("options");
//判斷下拉框是否爲多選(由於多選的話,在調用setValue方法的時候,會調用val的split方法,若是不包含分隔符",",會報錯)
if(opts.multiple){
val = val+",";
}
}
ed.actions.setValue(ed.target, val);
});
}
});
}
銷燬表格編輯框:編輯器
//銷燬單元格編輯器
function _destroyCellEditor(target, options) {
var opts = $.data(target, "datagrid").options;
var tr = opts.finder.getTr(target, options.index);
tr.children("td").each(function () {
var field = $(this).attr("field");
if (field == options.field) {//找到與傳遞參數相同field的單元格
var cell = $(this).find("div.datagrid-editable");
if (cell.length) {
var ed = $.data(cell[0], "datagrid.editor");
if (ed.actions.destroy) {
ed.actions.destroy(ed.target);
}
cell.html(ed.oldHtml);
$.removeData(cell[0], "datagrid.editor");
cell.removeClass("datagrid-editable");
cell.css("width", "");
}
}
});
}
單元格編輯以後執行:ide
function onAfterEditing(rowIndex,row,changes,id,url,arrays,options){
var saveData=save(rowIndex,row,changes,id,url,arrays,options);
row=saveData[0];
changes=saveData[1];
afterEdit(rowIndex,row,changes,id);
}
單元格編輯以後向後臺發送POST請求:函數
/**
* @param row編輯完單元格修改保存數據
* @param changes
* row 是修改以後的row,而不是原來的row
* @returns {Array}[0]表示row，[1]表示changes
*/
function save(index,row,changes,id,url,arrays,options)
{
var data={"id":row.id};
for (var key in row)
{
if (!$.isArray(row[key]) && !$.isFunction(row[key])
&& (typeof row[key]) == "object")
{
continue;
}
data["object."+key]=row[key];
}
$.post(url,data,function(data){
var obj=eval('('+data+')');
if (obj && obj.returnCode==1)
{
if (options && options.onAfterSubmit && $.isFunction(options.onAfterSubmit))
{
options.onAfterSubmit(index, row, changes,obj,id);
}
return;
}
//$("#_list").datagrid('rejectChanges'); //出錯回滾
$("#_list").datagrid('reload');
$.messager.alert('錯誤',obj.message,'error');
});
var saveData=new Array();
saveData[0]=row;//用來做爲datagrid的updateRow的參數用,注意有些特例,該row雖然是更改後的row,可是有些須要傳遞到action中的值並無發生變化,例如queryRateValues.jsp.js
saveData[1]=changes;
return saveData;
}
不重載datagrid,而是單獨刷新被修改的行:post
function afterEdit(rowIndex, rowData, changes,id){
$(id).datagrid('updateRow',{
index: rowIndex,
row: rowData
});
$(id).datagrid('acceptChanges');
}
field的formatter事件:ui
/**
* 根據typeCode查詢下拉框的列表值
* @param value
* @param row
* @returns {String}
*/
function typeMaskFormatter(value,row){
this.editor.options.url = "iface/findTypeMaskList?object.typeCode="+row.typeCode;
return row.typeMaskTexts;
}
值得注意的是:這麼寫還不能動態的根據row的typeCode的值來設定該行編輯器combobox的url,這個url是table的表頭中的url,雖然在每一個行初始化的時候都設定了options的url,可是實際上修改的是同一個元素的url的值,即每次進入formatter函數中,是從新設定了options的url,因此須要在單擊事件中跟新每一行:調用datagrid的refresh方法便可:
datagrid的表格雙擊事件:
onDblClickCell: function(rowIndex, field, value){
//return false;
var rowData = $(table).datagrid('getRowData',rowIndex);
onClickRow(rowIndex, field, value,id,url,arrays,options);
},
通用onClickRow()函數:
/**
* 開啓單擊單元格
*
*/
var _rowIndex = undefined;
var _field = undefined;
var _rowId=undefined;
function onClickRow(rowIndex, field, value,id,url,arrays,options) {
var columnOption=$(id).datagrid("getColumnOption",field);
if(columnOption && columnOption.readonly == true)
return false;
$(id).datagrid("refreshRow", rowIndex);//這行很關鍵,是實現combobox動態設定url,每次刷新行,也會刷新這一列的combobox的editor屬性,恰好借用來刷新url...
if (_rowIndex != rowIndex || _field != field) {
if (endEditing(id)){
$(id).datagrid('selectRow',rowIndex);
$(id).datagrid('beginEditCell', {index: rowIndex, field: field});
var ed = $(id).datagrid('getEditor', {index:rowIndex,field:field});
if(ed == null)
return false;
_rowIndex = rowIndex;
_field = field;
_rowId=id;
var row=$(id).datagrid("getRowData",rowIndex);
if(ed.type == 'combobox'){
//只要下拉框被編輯,那麼就點擊倒三角形,打開下拉麪板選項
$(".datagrid-editable-input").next('span').find('.combo-arrow').click();
$(".datagrid-editable-input").focus();
comboboxValue.row= row;
}else{
$(".datagrid-editable-input").focus(function(){
this.select();
});
$(ed.target).focus();
}
$(".datagrid-editable-input").blur(function(){
var changes={};
if(ed.type=='combobox'){
//須要注意的是:若是是下拉框,分爲兩種狀況:
//1.點擊了下拉麪板,那麼先執行.datagrid-editable-input的blur()事件,此時comboboxValue被賦值,再執行onHidePanel事件
//2.沒有點擊下拉麪板,只是點擊了面板的其餘地方而失去焦點,那麼會先執行onHidePanel事件,再執行.datagrid-editable-input的blur()事件,此時comboboxValue並無被賦值(只是被賦值了一個row屬性,其餘屬性沒有被賦值)
//1和2兩種狀況,下拉編輯框的關閉都是放到onHidePanel中執行
comboboxValue.id = id;
comboboxValue.rowIndex = rowIndex;
comboboxValue.field = field;
changes['status'] = "p";
// comboboxValue.row = row;
comboboxValue.url = url,
comboboxValue.changes = changes;
comboboxValue.value = $(".datagrid-editable-input").val();
}else {
if(ed.type=='checkbox'){
_destroyCellEditor($(id)[0],{index:rowIndex,field:field});
var state = $(this).prop('checked');
var obj = checkbox(row,state);
if(obj.state){
changes["status"]="P";
onAfterEditing(rowIndex,row,changes,id,url,arrays,options);
}
}else{
_destroyCellEditor($(id)[0],{index:rowIndex,field:field});
var oldVal=row[field];
var newVal=this.value;
if(oldVal!=newVal){//值有改變
changes[field]=newVal;
row[field]=newVal;
changes["status"]="P";
onAfterEditing(rowIndex,row,changes,id,url,arrays,options);
}
}
//由於在下拉框的onHidePanel中須要用到這兩個變量,因此這兩個變量的置空要放到hiddenpanel中執行
_rowIndex = undefined;
_field = undefined;
}
});
var rows=$(id).datagrid("getRows");
$(ed.target).bind('keydown', function()
{
switch (window.event.keyCode) {
case 13://enter
$(this).blur();
endEditing(id);
event.returnValue=false;
if(rowIndex<rows.length-1){
onClickRow(rowIndex+1,field,value,id,url,arrays,options);
}
break;
case 37://left
$(this).blur();
//中止上一個框的編輯
endEditing(id);
//禁止默認鍵盤事件
event.returnValue=false;
var prevfiled=$(id).datagrid("prevColumn",field);
if(prevfiled!=null&&prevfiled.editor){
onClickRow(rowIndex,prevfiled.field,value,id,url,arrays,options);
}
break;
case 38://up
$(this).blur();
endEditing(id);
event.returnValue=false;
if(rowIndex>0){
onClickRow(rowIndex-1,field,value,id,url,arrays,options);
}
break;
case 39://right
$(this).blur();
endEditing(id);
event.returnValue=false;
var nextfiled=$(id).datagrid("nextColumn",field);
if(nextfiled!=null&&nextfiled.editor){
onClickRow(rowIndex,nextfiled.field,value,id,url,arrays,options);
}
break;
case 40://down
$(this).blur();
endEditing(id);
event.returnValue=false;
if(rowIndex<rows.length-1){
onClickRow(rowIndex+1,field,value,id,url,arrays,options);
}
break;
case 27:// Escape Escape
$(this).blur();
endEditing(id);
break;
}
});
}
}
return true;
}
附上datagrid的combobox的單選框:
<th field="makeRule" width="150" sortable="false" align="center" formatter="makeRuleFormatter" editor="{type:'combobox',
options:{required: true,url:'iface/findMakeRuleList',valueField:'key',textField:'value',panelHeight:100,
onHidePanel: function()
{
var textField = $('.datagrid-editable-input').val();
if(comboboxValue.value && textField!=comboboxValue.value){
var valueField = $('.datagrid-editable-input').next().next().val();
var row = comboboxValue.row;
row.makeRuleName = textField
row.makeRule = valueField;
_destroyCellEditor($(comboboxValue.id)[0],{index:comboboxValue.rowIndex,field:comboboxValue.field});
onAfterEditing(comboboxValue.rowIndex,row,comboboxValue.changes,comboboxValue.id,comboboxValue.url);
endEditing(comboboxValue.id);//此行代碼讓編輯框被銷燬以後還可以再次打開編輯器(例如雙擊打開)
}else{
_destroyCellEditor($('#_list')[0],{index:_rowIndex,field:_field});
endEditing('#_list');
}
_rowIndex = undefined;
_field = undefined;
comboboxValue = {};
},
onLoadSuccess:function(data){
zdyComboboxArray = data;
}
}}">對應編制辦法
</th>
另外設置combobox的顯示的text和value:
//類別掩碼的類型集合,以","號鏈接,用來作下拉框的value,由於下拉框能夠多選,因此這裏使用集合ArrayList或者數組
private List<Integer> typeMaskValues;
//顯示類別掩碼的名稱,用來作下拉框的顯示用,能夠是集合ArrayList或者數組
private List<String> typeMaskTexts;
public List<Integer> getTypeMaskValues() {
return typeMaskValues;
}
public void setTypeMaskValues(List<Integer> typeMaskValues) {
this.typeMaskValues = typeMaskValues;
}
public List<String> getTypeMaskTexts() {
return typeMaskTexts;
}
public void setTypeMaskTexts(List<String> typeMaskTexts) {
this.typeMaskTexts = typeMaskTexts;
}
datagrid的editor的target是一個combobox,經過調用它的setValue來設定combobox的value值,而後combobox的會根據它的value值來設定顯示值,即可以在input框中看到的文本值,同時讓下拉列表的對應的選項處於選中狀態;若是combobox是單選,那麼會直接根據combobox的value值來設定顯示值,同時選中列表選項;若是爲多選,那麼會根據combobox的value值,先調用split(",")方法獲得value的數組,而後循環數組,根據其中的每一個value的值設定顯示值text(text是追加上去的),同時循環選中下拉列表對應的選項.
效果圖:
datagrid的類別掩碼顯示:
雙擊單元格,開啓編輯,單元格的editor爲下拉框,向後臺發送不一樣的請求url,返回指定列表:
相關文章
- 1. easyui之datagrid（combobox類型的editor）
- 2. datagrid editor動態的改變不一樣行修改列的editor屬性
- 3. easyui的combobox的一點小問題
- 4. easyui editor combobox multiple
- 5. 在EasyUI的DataGrid中嵌入Combobox
- 6. EasyUI--datagrid中編輯器(editor)的類型爲combobox的值得綁定
- 7. easyui combobox 的使用
- 8. easyui combobox的使用
- 9. easyui的combobox數據重載
- 10. echarts如何給柱形圖的每一個柱子設置不一樣顏色
- 更多相關文章...
- • Hibernate的一級緩存 - Hibernate教程
- • PHP imagecreate - 新建一個基於調色板的圖像 - PHP參考手冊
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. easyui之datagrid（combobox類型的editor）
- 2. datagrid editor動態的改變不一樣行修改列的editor屬性
- 3. easyui的combobox的一點小問題
- 4. easyui editor combobox multiple
- 5. 在EasyUI的DataGrid中嵌入Combobox
- 6. EasyUI--datagrid中編輯器(editor)的類型爲combobox的值得綁定
- 7. easyui combobox 的使用
- 8. easyui combobox的使用
- 9. easyui的combobox數據重載
- 10. echarts如何給柱形圖的每一個柱子設置不一樣顏色