 Show Posts
|
|
Pages: 1 ... 3 4 [5]
|
|
61
|
General Category / EasyUI for jQuery / Tool-tipping for menu
|
on: July 06, 2019, 08:11:16 AM
|
I use a ribon menu and would like to dynamic add tool-tipping, how can I? Here is my code example: <div id="rr" style="width: 700px;"></div>
<script>
$(function () {
var data = {
tabs: [{
title: 'Home'
, tooltip: 'Welcome to the home menu'
, groups: [{
title: 'Clipboard'
, tools: [{
type: 'toolbar'
, tools: [{
name: 'paste'
, tooltip: 'Paste stuff'
, text: 'Paste'
, iconCls: 'icon-paste-large'
, iconAlign: 'top'
, size: 'large'
}]
}, {
type: 'toolbar'
, dir: 'v'
, tools: [{
name: 'cut'
, tooltip: 'Cut stuff'
, text: 'Cut'
, iconCls: 'icon-cut'
, iconAlign: 'left'
, size: 'small'
}, {
name: 'copy'
, tooltip: 'Copy stuff'
, text: 'Copy'
, iconCls: 'icon-copy'
, iconAlign: 'left'
, size: 'small'
}, {
name: 'format'
, tooltip: 'Format stuff'
, text: 'Format'
, iconCls: 'icon-format'
, iconAlign: 'left'
, size: 'small'
}]
}]
}, {
title: 'other title'
, tools: [{
type: 'toolbar'
, tools: [{
width: '200px'
}]
}]
}]
}]
}
$('#rr').ribbon({
data: data
});
});
</script>
|
|
|
|
|
63
|
General Category / EasyUI for jQuery / Adding a toolbar to a combotree editor using java script
|
on: June 14, 2019, 02:01:37 PM
|
I need to add a toolbar to an editor of type combotree in the DataGrid Inline Editing example. Can you please provide a code example how to do this using java script? The editor of type combogrid works fine. <table id="tt"></table>
<script>
var products = [
{ productid: 'FI-SW-01', name: 'Koi' },
{ productid: 'K9-DL-01', name: 'Dalmation' },
{ productid: 'RP-SN-01', name: 'Rattlesnake' },
{ productid: 'RP-LI-02', name: 'Iguana' },
{ productid: 'FL-DSH-01', name: 'Manx' },
{ productid: 'FL-DLH-02', name: 'Persian' },
{ productid: 'AV-CB-01', name: 'Amazon Parrot' }
];
var productfamilies = [{
"id": "a",
"text": "Animals",
"iconCls": "icon-save",
"children": [{
"id": "t",
"text": "Tame",
"checked": true,
"children": [{
"id": "n",
"text": "No legs",
"checked": true
}, {
"id": "s",
"text": "Some legs",
"state": "closed"
}]
}, {
"id": "w",
"text": "Wild",
"state": "open",
"attributes": {
"url": "/demo/book/abc",
"price": 100
},
"children": [{
"id": "f",
"text": "Four legs",
"checked": true
}, {
"id": "o",
"text": "Other legs",
"state": "closed"
}]
}]
}, {
"id": "p",
"text": "Plants",
"state": "open",
"children": [{
"id": "g",
"text": "Green"
}, {
"id": "b",
"text": "Brown"
}]
}];
var data = {
"total": 28, "rows": [
{ "productid": "FI-SW-01", "productname": "Koi", "productfamilyid": "a", "productfamilyname": "Animals", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "productfamilyid": "t", "productfamilyname": "Tame", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "productfamilyid": "n", "productfamilyname": "No legs", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "productfamilyid": "s", "productfamilyname": "Some legs", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "productfamilyid": "w", "productfamilyname": "Wild", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "productfamilyid": "f", "productfamilyname": "Four legs", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "productfamilyid": "o", "productfamilyname": "Other legs", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "productfamilyid": "p", "productfamilyname": "Plants", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "productfamilyid": "a", "productfamilyname": "Animals", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "productfamilyid": "t", "productfamilyname": "Tame", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
]
};
var columns = [
{ field: 'itemid', title: 'Item ID', width: 60 },
{
field: 'productid', title: 'Product', width: 100,
formatter: function (value, row, index) {
// console.log(index);
return row.productname || value;
},
editor: {
type: 'combogrid',
options: {
panelWidth: 400,
columns: [[
{ field: "productid", title: "productid", width: 100 }
, { field: "name", title: "name", width: 200 }
]],
idField: 'productid',
textField: 'name',
data: products,
required: true,
toolbar: [{ iconCls: 'icon-save' }, { text: "<div id='abc'>My menu</div>" }]
}
}
},
{
field: "productfamilyid", title: "productfamilyid", width: 100,
formatter: function (value, row,index) {
// console.log(row);
if (row) {
return row.productfamilyname;
} // else return value;
},
editor: {
type: 'combotree',
options: {
// idField: "id",
// textField: "text",
panelWidth: 400,
data: productfamilies,
required: true,
toolbar: [{ iconCls: 'icon-save' }, { text: "<div id='abc'>My menu</div>" }]
}
}
},
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' },
{ field: 'attr1', title: 'Attribute', width: 180, editor: 'text' },
{
field: 'status', title: 'Status', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'P',
off: ''
}
}
},
{
field: 'action', title: 'Action', width: 80, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
return s + c;
} else {
var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
return e + d;
}
}
}
];
$(function () {
$('#tt').datagrid({
title: 'Editable DataGrid',
iconCls: 'icon-edit',
width: 760,
height: 250,
singleSelect: true,
idField: 'itemid',
data: data,
columns: [columns],
onEndEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
},
onBeforeEdit: function (index, row) {
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
}
}).datagrid('enableFilter');
});
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target) {
$.messager.confirm('Confirm', 'Are you sure?', function (r) {
if (r) {
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target) {
$('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target) {
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert() {
var row = $('#tt').datagrid('getSelected');
if (row) {
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row: {
status: 'P'
}
});
$('#tt').datagrid('selectRow', index);
$('#tt').datagrid('beginEdit', index);
}
</script>
Many tanks for your help! |
|
|
|
|
65
|
General Category / EasyUI for jQuery / Adding a second textbox header row in datagrid
|
on: June 12, 2019, 03:05:27 PM
|
I need a second textbox header row in datagrid and wonder if that is possible to add? The purpose is to give the user the option to update a table column using this textbox row and push set. I can manage the set code but need help in how to configure a second column row and overwrite the column names with textbox. Here's an image example attached of how it should look. The "SET" row is what I want to add.  My example code where the column is repeated two times. However the first should be the text boxes, just like the filter pane implements. <table id="tt"></table>
<script>
var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
var data = {
"total": 28, "rows": [
{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
]
};
var columns = [
{ field: 'itemid', title: 'Item ID', width: 60 },
{
field: 'productid', title: 'Product', width: 100,
formatter: function (value, row) {
return row.productname || value;
},
editor: {
type: 'combobox',
options: {
valueField: 'productid',
textField: 'name',
data: products,
required: true
}
}
},
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' },
{ field: 'attr1', title: 'Attribute', width: 180, editor: 'text' },
{
field: 'status', title: 'Status', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'P',
off: ''
}
}
},
{
field: 'action', title: 'Action', width: 80, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
return s + c;
} else {
var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
return e + d;
}
}
}
];
$(function(){
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
data:data,
columns: [columns, columns],
onEndEdit:function(index,row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
},
onBeforeEdit:function(index,row){
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
}
}).datagrid('enableFilter');
});
function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target){
$.messager.confirm('Confirm','Are you sure?',function(r){
if (r){
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target){
$('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target){
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row:{
status:'P'
}
});
$('#tt').datagrid('selectRow',index);
$('#tt').datagrid('beginEdit',index);
}
</script>
Thanks for any help! |
|
|
|
|
66
|
General Category / EasyUI for jQuery / Re: Subgrids and dynamic fixDetailRowHeight
|
on: April 09, 2019, 03:51:34 AM
|
Now with 'getParentGrid' I got it to work better but it does not expand the list as I expect. Now it looks like this: as_Is.png And should look like this: should_be.png I got the right format (should_be.png) by collapsing and expanding each row once going up to the highest level. Here is the new code: <div id="dg_main"></div>
<script type="text/javascript">
function f_dg(iID, lev, oID) {
if (!oID) {
oID = {};
lev = 0;
iID = "";
}
var thislevel = Object.keys(oID).length;
var fit = false;
if (lev === 0) { fit = true; }
lev++;
var datagrid = {
singleSelect: true
, pagination: true
, view: detailview
, url: "static/home_data.aspx"
, fit: fit
, fitColumns: true
, title: ":" + lev + iID
, detailFormatter: function (index, row) {
return "<div class='ddv' style='padding:5px 0'></div>";
}
, columns: [[
{ field: "itemid", title: "Item ID", width: 80 }
, { field: "productid", title: "Product ID", width: 100 }
, { field: "listprice", title: "listprice", width: 80, align: "right" }
, { field: "unitcost", title: "Unit Cost", width: 80, align: "right" }
, { field: "attr1", title: "Attribute", width: 220 }
, { field: "status", title: "Status", width: 60, align: "center" }
, { field: lev + iID, title: lev + iID, width: 60, align: "center" }
]]
, onExpandRow: function (index, row) {
var zID = "_" + lev + iID + index;
if (!$("#pan_" + zID)[0]) {
var ddv = $(this).datagrid("getRowDetail", index).find("div.ddv");
ddv.panel({
id: "pan_" + zID
, cache: false
})
.tabs({
tabHeight: 25
, showHeader: true
, tabPosition: "top"
, onSelect: function (title) {
var pdg = $(this).datagrid('getParentGrid');
var zdg = $("#g_" + zID + title);
if (!zdg.data("datagrid")) {
$(zdg).datagrid(f_dg(zID + title, lev, oID));
}
else {
zdg.datagrid({
url: "static/home_data.aspx"
, onLoadSuccess: function () {
var p_grid = $(this).datagrid('getSelfGrid');
fn_fix(p_grid, index);
}
});
}
var p_grid = $(this).datagrid('getSelfGrid');
fn_fix(p_grid, index);
}
})
.tabs("add", { id: "tab1_" + index, title: "tab1", content: "<div id='g_" + zID + "tab1'>tab1_" + index + "</div>" })
.tabs("add", { id: "tab2_" + index, title: "tab2", content: "tab2_" + index + "" })
;
}
}
}
return datagrid;
}
function fn_fix(grid, index) {
grid.datagrid("fixDetailRowHeight", index);
var p1 = grid.datagrid("getParentGrid");
if (p1) {
p1.datagrid("fixDetailRowHeight", grid.datagrid("getParentRowIndex"));
var p2 = p1.datagrid("getParentGrid");
if (p2) {
p2.datagrid("fixDetailRowHeight", p1.datagrid("getParentRowIndex"));
var p3 = p2.datagrid("getParentGrid");
if (p3) {
p3.datagrid("fixDetailRowHeight", p2.datagrid("getParentRowIndex"));
}
}
}
$("#dg_main").datagrid("fixDetailRowHeight", 0);
}
$("#dg_main").datagrid(f_dg());
</script>
How can this be expanded automatically? Thanks for help! |
|
|
|
|
67
|
General Category / EasyUI for jQuery / Subgrids and dynamic fixDetailRowHeight
|
on: April 07, 2019, 09:39:37 AM
|
I have sub-grids containing tabs and want to fix the DetailRowHeight dynamically. In my current solution I need to track the path to expanded sub-grid and revers to top grid and do fixDetailRowHeight. I fail trying and hope there is a better way. Below is my code example, please advise. <div id="dg_main"></div>
<script type="text/javascript">
function f_dg(iID, lev, oID) {
if (!oID) {
oID = {};
lev = 0;
iID = "";
}
var thislevel = Object.keys(oID).length;
var fit = false;
if (lev === 0) { fit = false; }
lev++;
var datagrid = {
singleSelect: true
, pagination: true
, view: detailview
, url: "static/home_data.aspx"
, fit: fit
, fitColumns: true
, title: ":" + lev + iID
, detailFormatter: function (index, row) {
return "<div class='ddv' style='padding:5px 0'></div>";
}
, columns: [[
{ field: "itemid", title: "Item ID", width: 80 }
, { field: "productid", title: "Product ID", width: 100 }
, { field: "listprice", title: "listprice", width: 80, align: "right" }
, { field: "unitcost", title: "Unit Cost", width: 80, align: "right" }
, { field: "attr1", title: "Attribute", width: 220 }
, { field: "status", title: "Status", width: 60, align: "center" }
]]
, onExpandRow: function (index, row) {
var zID = "_" + lev + iID + index;
if (!$("#pan_" + zID)[0]) {
var ddv = $(this).datagrid("getRowDetail", index).find("div.ddv");
ddv.panel({
id: "pan_" + zID
, cache: false
})
.tabs({
tabHeight: 25
, showHeader: true
, tabPosition: "top"
, onSelect: function (title) {
var zdg = $("#g_" + zID + title);
if (!zdg.data("datagrid")) {
$(zdg).datagrid(f_dg(zID + title, lev, oID));
}
else {
zdg.datagrid({
url: "static/home_data.aspx"
, onLoadSuccess: function () {
$("#dg_main").datagrid("fixDetailRowHeight", index);
}
});
}
$("#dg_main").datagrid("fixDetailRowHeight", index);
}
})
.tabs("add", { id: "tab1_" + index, title: "tab1", content: "<div id='g_" + zID + "tab1'>tab1_" + index + "</div>" })
.tabs("add", { id: "tab2_" + index, title: "tab2", content: "tab2_" + index + "" })
;
}
}
}
return datagrid;
}
$("#dg_main").datagrid(f_dg());
</script>
|
|
|
|
|
