sortable custom（extjs 怎样创建一个空表格，默认有10个空行，实现增加行和删除行急！）

本文目录

• extjs 怎样创建一个空表格，默认有10个空行，实现增加行和删除行急！
• jQuery实现元素拖拽并cookie保存顺序的方法

extjs 怎样创建一个空表格，默认有10个空行，实现增加行和删除行急！

ExtJS 分页数据表文章分类:Web前端ir - DESC 排序方式 ASC为升序limit -25 记录数sort-lastpost 排序字段start -0 开始记录 $data = array("threadid" =》 26816 ...);$pack = array(
"totalCount" =》 count($data),
"topics" =》 $data
);echo json_encode($pack);*/reader: new Ext.data.JsonReader({
root: ’topics’,
totalProperty: ’totalCount’, // 数据总跳数，用于计算分多少页
id: ’threadid’, // 数据需要有ID
fields: [ // 字段列表
’title’, ’forumtitle’, ’forumid’, ’author’,
{name: ’replycount’, type: ’int’},
{name: ’lastpost’, mapping: ’lastpost’, type: ’date’, dateFormat: ’timestamp’},
’lastposter’, ’excerpt’ // lastpost传过来的是timestamp格式
]
}),
// turn on remote sorting 在远程进行排序
remoteSort: true
});
store.setDefaultSort(’lastpost’, ’desc’); // 默认排序方式// pluggable renders 特殊的字段显示Render
function renderTopic(value, p, record){ // value为字段当前值, p ? , record为整个记录
return String.format( // String使用 {0},{1}作为占位幅
***隐藏网址***
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format(’{0}《br/》by {1}’, value.dateFormat(’M j, Y, g:i a’), r.data);
}
// 列显示模型 (Column Model)var cm = new Ext.grid.ColumnModel([{
id: ’topic’, // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: ’title’,
width: 420,
renderer: renderTopic // 使用特殊的Renderer
},{
header: "Author",
dataIndex: ’author’,
width: 100,
hidden: true // 默认隐藏
},{
header: "Replies",
dataIndex: ’replycount’,
width: 70,
align: ’right’ // 对齐方式
},{
id: ’last’,
header: "Last Post",
dataIndex: ’lastpost’,
width: 150,
renderer: renderLast // 特殊render
}]);// by default columns are sortable
cm.defaultSortable = true;// Grid Panelvar grid = new Ext.grid.GridPanel({
el:’topic-grid’, // DiV容器显示GridPanel, 在HTML中《div id="topic-grid"》《/div》
width:700,
height:500,
title:’ExtJS.com - Browse Forums’,
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}), // 不能Select ?
loadMask: true, // 显示载入提示
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true, // 是否显示摘要
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = ’《p》’+record.data.excerpt+’《/p》’;
return ’x-grid3-row-expanded’;
}
return ’x-grid3-row-collapsed’;
}
},
bbar: new Ext.PagingToolbar({ // 重要的分页工具条
pageSize: 25, // 每页条数
store: store,
displayInfo: true,
displayMsg: ’Displaying topics {0} - {1} of {2}’, // 右下角提示
emptyMsg: "No topics to display", // 无记录
items:[ // show preview 显示按钮
’-’, {
pressed: true,
enableToggle:true,
text: ’Show Preview’,
cls: ’x-btn-text-icon details’,
toggleHandler: toggleDetails // handler函数
}]
})
}); // render it
grid.render();// trigger the data store load
store.load({params:{start:0, limit:25}}); // 加载初始数据function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
});
JS代码注释：Ext.onReady(function(){// create the Data Store
var store = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
// proxy: new Ext.data.ScriptTagProxy({
proxy: new Ext.data.HttpProxy({
url: ’debug.php’ // 后端PHP
}),// create reader that reads the Topic records/* 后端PHP输出格式 PHP 接收的$_REQUEST参数

jQuery实现元素拖拽并cookie保存顺序的方法

本文实例讲述了jQuery实现元素拖拽并cookie保存顺序的方法。分享给大家供大家参考，具体如下：
《!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
***隐藏网址***
《html
***隐藏网址***
《head
runat="server"》
《title》《/title》
《style
type="text/css"》
div
{
border:
1px
solid
red;
}
#myList
{
padding-top:
20px;
width:
500px;
background:
#EEE;
list-style-type:
none;
}
#myList
li
{
height:
30px;
cursor:
pointer;
margin:
20px;
border:
1px
solid
blue;
}
#myList
a
{
text-decoration:
none;
color:
#0077B0;
}
#myList
a:hover
{
text-decoration:
underline;
}
#myList
.qlink
{
font-size:
12px;
color:
#666;
margin-left:
10px;
}
《/style》
《script
src="jquery-1.6.2.min.js"
type="text/javascript"》《/script》
《script
src="jquery-ui-1.8.16.custom.min.js"
type="text/javascript"》《/script》
《script
src="jquery.cookie.js"
type="text/javascript"》《/script》
《script
type="text/javascript"》
$(function()
{
$("#myList").sortable({
delay:
1,
containment:
"div",connectWith:
".otherlist",
stop:
function()
{
//alert($("#myList").sortable("serialize"));
//alert($("#myList").sortable("toArray"));
$.cookie("myCookie",$("#myList").sortable(’toArray’),{
expires:
7
});
//alert($.cookie("myCookie"));
}});
if
($.cookie("myCookie"))
{
var
ids
=
$.cookie("myCookie").split(",");
for
(var
i
=
0;
i
《
ids.length;
i++)
{
$("#"
+
ids).appendTo("#myList");
}}
});
《/script》
《/head》
《body》
《div》
《ul
id="myList"》
《li
id="myList_mood"》《a
href="#"》心情《/a》
《/li》
《li
id="myList_photo"》《a
href="#"》相册《/a》
《/li》
《li
id="myList_blog"》《a
href="#"》日志《/a》
《/li》
《li
id="myList_vote"》《a
href="#"》投票《/a》
《/li》
《li
id="myList_shate"》《a
href="#"》分享《/a》
《/li》
《li
id="myList_group"》《a
href="#"》群组《/a》
《/li》
《/ul》
《/div》
《/body》
《/html》
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。