I found this code to append a new row to easyui datagrid, but what about appending some rows more than one? Is there a way to append some rows together at the end of a datagrid?
$('#dg').datagrid('appendRow',{
name: 'new name',
age: 30,
note: 'some messages'
});
This will add ten rows:
for(i=0;i<10;i++){
$('#dg').datagrid('appendRow',{
name: 'new name',
age: 30,
note: 'some messages'
});
};
Related
how can I add class_list or set attribute for every td in column when using [yajra ] (https://github.com/yajra/laravel-datatables) datatable
You do it in the javascript. I have a datatable with the css id of "claims-table". I want to add classes to the first column, which in my case is called "id". My code is below. Look at the "columns" to see that I'm adding classes and returning the column as an href.
$(function() {
$('#claims-table').DataTable({
processing: true,
serverSide: true,
searching: false,
ajax: '/claims-table',
columns: [
{data: 'id', name: 'id', render: function(data,type,row) {
data = '<a class="claim_info underline_td" claim_id="'+data+'" href="/#">Claim ID '+data+'</a>';
return data;
}},
{data: 'order_id', name: 'order_id'},
{data: 'name', name: 'name'},
{data: 'status_description',name: 'status_description'}
]
});
});
Version
3.0.3
Environment
pc, chrome
Reproduction link
https://codesandbox.io/s/my02ok19wy
Steps to reproduce
now, Table can expand row by two ways:
use icon in the first column
click the whole row with expandRowByClick as true.
But those are not what I want. I want to use the button in some other column, maybe the button Show More. Then, when I click Show More, the row will expand. How to realize this?
Like the demo shows, I want to expand the row by click Show More instead of click the button in the first cell. Thanks
What is expected?
expand one row by click one button not in the first cell
What is actually happening?
Must click the button in the first cell of the row. The button can't move to other cell.
It's possible but I prefer not to do the code for you, but I will explain how.
There is a props call expandedRowKeys where you specify keys of rows that you want to expand.
so
adding expandedRowKeys={[1,3]} to <Table /> will expand the first and the third row.
Now, you just need to implement the handleClickMore function to manipulate an array of row keys. and how something like
expandedRowKeys={this.state.expandedKeys}
You can use expandIcon and expandedRowRender for your purpose
This is the modified code:
import React from "react";
import ReactDOM from "react-dom";
import { version, Table, Button } from "antd";
import "antd/dist/antd.css";
const columns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Age", dataIndex: "age", key: "age" },
{ title: "Address", dataIndex: "address", key: "address" },
{ title: "Action", dataIndex: "", key: "expand" }
];
const data = [
{
key: 1,
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
description:
"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
},
{
key: 2,
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
description:
"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
},
{
key: 3,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
description:
"My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
}
];
ReactDOM.render(
<div style={{ margin: 24 }}>
<p style={{ marginBottom: 24 }}>
Current antd version: {version} <br />
You can change antd version on the left panel (Dependencies section).
</p>
<Table
// expandIconColumnIndex={3}
columns={columns}
expandedRowRender={(record) => (
<p style={{ margin: 0 }}>{record.description}</p>
)}
dataSource={data}
expandIcon={({ expanded, onExpand, record }) =>
expanded ? (
<Button
onClick={(e) => onExpand(record, e)}
>
Collapse
</Button>
) : (
<Button onClick={(e) => onExpand(record, e)}>Expand</Button>
)
}
/>
</div>,
document.getElementById("root")
);
I want to add several items in a select2 input field at once.
If I copy+paste "Hawaii Alaska" into the select-multiple example here, then I get:
No results found
In my case spaces are not allowed in the items.
Is there a way to insert N space sperated items via copy+paste?
Desired result: (x)Hawaii (x)Alaska
you can add token separators in your select2 to identify characters as stopping points for your tags/choices, but unfortunately it bugs on the last copy pasted item
//try copy pasting bug,invalid, enhancement, wontfix
//then try bug,invalid, enhancement
//you will see the problem
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
var placeholder = "select";
$(".mySelect").select2({
tokenSeparators: [',', ', ', ' '],
data: data,
placeholder: placeholder,
allowClear: false,
minimumResultsForSearch: 5
});
here is the codepen
http://codepen.io/anon/pen/dMWQbd
its opened as a bug in github on the library
https://github.com/select2/select2/issues/3458
I have jqxgrid.I am very new to jqxgrid.I want to display total of recordes or values in column.
Can any tell me how to do
enter image description here
jqxgrid have feature to show aggregates for some column, that aggregates could be 'SUM', 'COUNT', or 'AVERAGE'
you can set the aggregates types when u set the column setting in jqxgrid declaration.
for simple example is like this :
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
showstatusbar: true,
statusbarheight: 50,
showaggregates: true,
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
]
});
for custom aggregates, u can learn from this link
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?arctic
for complete documentation for aggregates please check the API's documentation from their documentation.
hope this helps
I've been struggling to get the bindings correct for one to many relationship using Sproutcore 2.0.
My templates look like this:
<script type="text/x-handlebars">
{{#collection contentBinding="HTH.projectsController.content"}}
<h3>{{content.title}}</h3>
{{#collection contentBinding="content.tasks"}}
<span>{{content.title}}</span>
{{/collection}}
{{/collection}}
</script>
While the actual code looks like:
HTH.Project = SC.Record.extend({
title: SC.Record.attr(String),
tasks: SC.Record.toMany('HTH.Task',{
isMaster: YES,
inverse: 'project'
})
});
HTH.Task = SC.Record.extend({
title: SC.Record.attr(String),
project: SC.Record.toOne('HTH.Project', {
isMaster: NO
})
});
HTH.Project.FIXTURES = [ { guid: 1, title: 'Send man to moon', tasks: [1,2]},
{ guid: 2, title: 'Master handstand', tasks: [3]}];
HTH.Task.FIXTURES = [ { guid: 1, title: 'Find rocket', project: 1},
{ guid: 2, title: 'Find fuel', project: 1},
{ guid: 3, title: 'Stand on hands', project: 2}];
HTH.store = SC.Store.create().from(SC.Record.fixtures);
// Controllers
HTH.projectsController = SC.ArrayProxy.create({
content: HTH.store.find(HTH.Project)
});
Now I can update tasks, and these will update the UI. For example:
HTH.store.find(HTH.Project).get('firstObject').set('title','Updated the title!');
However, if I create a new project and dynamically add a task to that the UI will add the new project, but never add any offers:
var project = HTH.store.createRecord(HTH.Project, {title: "New" });
var task = HTH.store.createRecord(HTH.Task, {title: "New task" });
project.get('tasks').pushObject(task);
I'm certain this is down to a binding not working as expected, or a property that needs to be observed. Can anyone help?
NOTE: This question was asked before SproutCore 2.0 became Ember.js. It also references an unofficial port of the SproutCore 1.x data store, which has since been superseded by the officially supported ember-data library.
In order for a record to be useable it needs to be assigned an ID.
This means that:
var project = HTH.store.createRecord(HTH.Project, {title: "New" });
var task = HTH.store.createRecord(HTH.Task, {title: "New task" });
project.get('tasks').pushObject(task);
Becomes:
var project = HTH.store.createRecord(HTH.Project, {title: "New" }, 123);
var task = HTH.store.createRecord(HTH.Task, {title: "New task" }, 321);
project.get('tasks').pushObject(task);
The changes will then be reflected in the UI