Javascript - ExtJs - 组件 - 分页
服务端只需要返回如下格式的字符串，ExtJs就可以解析并自动生成分页数据。
totalProperty: 100 //当前查询的记录总数
root:
[
{ id:1, name: "sam" }, //每条记录
{ id:2, name: "sam" }
]
}
准备：
@TableNames VARCHAR(2000) , --表名，可以是多个表，但不能用别名
@PrimaryKey VARCHAR(100) , --主键，可以为空，但@Order为空时该值不能为空
@Fields VARCHAR(4000) , --要取出的字段，可以是多个表的字段，可以为空，为空表示select *
@PageSize INT , --每页记录数
@CurrentPage INT , --当前页，0表示第1页
@Filter VARCHAR(4000) = '' , --条件，可以为空，不用填 where
@Group VARCHAR(2000) = '' , --分组依据，可以为空，不用填 group by
@Order VARCHAR(2000) = '' , --排序，可以为空，为空默认按主键升序排列，不用填 order by
@RecordCount INT OUTPUT --总记录数,自己增加（总记录数）
AS
BEGIN
IF ( @PageSize > 100 )
BEGIN
SET @PageSize = 100;
END;
IF ( @PageSize < 5 )
BEGIN
SET @PageSize = 5;
END;
DECLARE @SortColumn VARCHAR(200);
DECLARE @Operator CHAR(2);
DECLARE @SortTable VARCHAR(200);
DECLARE @SortName VARCHAR(200);
IF @Fields = ''
SET @Fields = '*';
IF @Filter = ''
SET @Filter = 'Where 1=1';
ELSE
SET @Filter = 'Where ' + @Filter;
IF @Group <> ''
SET @Group = 'GROUP BY ' + @Group;
IF @Order <> ''
BEGIN
DECLARE @pos1 INT ,
@pos2 INT;
SET @Order = REPLACE(REPLACE(@Order, ' asc', ' ASC'), ' desc',
' DESC');
IF CHARINDEX(' DESC', @Order) > 0
IF CHARINDEX(' ASC', @Order) > 0
BEGIN
IF CHARINDEX(' DESC', @Order) < CHARINDEX(' ASC',
@Order)
SET @Operator = '<=';
ELSE
SET @Operator = '>=';
END;
ELSE
SET @Operator = '<=';
ELSE
SET @Operator = '>=';
SET @SortColumn = REPLACE(REPLACE(REPLACE(@Order, ' ASC', ''),
' DESC', ''), ' ', '');
SET @pos1 = CHARINDEX(',', @SortColumn);
IF @pos1 > 0
SET @SortColumn = SUBSTRING(@SortColumn, 1, @pos1 - 1);
SET @pos2 = CHARINDEX('.', @SortColumn);
IF @pos2 > 0
BEGIN
SET @SortTable = SUBSTRING(@SortColumn, 1, @pos2 - 1);
IF @pos1 > 0
SET @SortName = SUBSTRING(@SortColumn, @pos2 + 1,
@pos1 - @pos2 - 1);
ELSE
SET @SortName = SUBSTRING(@SortColumn, @pos2 + 1,
LEN(@SortColumn) - @pos2);
END;
ELSE
BEGIN
SET @SortTable = @TableNames;
SET @SortName = @SortColumn;
END;
END;
ELSE
BEGIN
SET @SortColumn = @PrimaryKey;
SET @SortTable = @TableNames;
SET @SortName = @SortColumn;
SET @Order = @SortColumn;
SET @Operator = '>=';
END;
DECLARE @type VARCHAR(50);
DECLARE @prec INT;
SELECT @type = t.name ,
@prec = c.prec
FROM sysobjects o
JOIN syscolumns c ON o.id = c.id
JOIN systypes t ON c.xusertype = t.xusertype
WHERE o.name = @SortTable
AND c.name = @SortName;
IF CHARINDEX('char', @type) > 0
SET @type = @type + '(' + CAST(@prec AS VARCHAR) + ')';
DECLARE @TopRows INT;
SET @TopRows = @PageSize * @CurrentPage + 1;
--print('
-- DECLARE @SortColumnBegin ' + @type + '
-- SET ROWCOUNT ' + cast(@TopRows as varchar(8)) + '
-- Select @SortColumnBegin=' + @SortColumn + ' FROM ' + @TableNames + ' ' + @Filter + ' ' + @Group + ' orDER BY ' + @Order + '
-- SET ROWCOUNT ' + cast(@PageSize as varchar(8)) + '
-- Select ' + @Fields + ' FROM ' + @TableNames + ' ' + @Filter + ' AND ' + @SortColumn + '' + @Operator + '@SortColumnBegin ' + @Group + ' orDER BY ' + @Order + '
--')
EXEC('
DECLARE @SortColumnBegin ' + @type + '
SET ROWCOUNT ' + @TopRows + '
Select @SortColumnBegin=' + @SortColumn + ' FROM ' + @TableNames + ' ' + @Filter + ' ' + @Group + ' orDER BY ' + @Order + '
SET ROWCOUNT ' + @PageSize + '
Select ' + @Fields + ' FROM ' + @TableNames + ' ' + @Filter + ' AND ' + @SortColumn + '' + @Operator + '@SortColumnBegin ' + @Group + ' orDER BY ' + @Order + '
');
IF @RecordCount IS NULL
BEGIN
DECLARE @sql NVARCHAR(4000);
SET @sql = N'SELECT @RecordCount=COUNT(*)' + N' FROM '
+ @TableNames + N' ' + @Filter;
EXEC sp_executesql @sql, N'@RecordCount int OUTPUT',
@RecordCount OUTPUT;
END;
END;
SQL Procedure
EXEC usp_PagingLarge 'UserManagers inner join Departments on UserManagers.DepartmentId=Departments.DepartmentId inner join TbRoses on UserManagers.TbRoseId=TbRoses.TbRoseId ', 'UserManagers.UserId', '',10, 0, '', '', 'UserManagers.UserId asc',@recount
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Data.SqlClient;
using System.Data.Entity;
namespace App_code
{
public class Pager
{
/// <summary>
/// Entity分页。支持单表、多表
/// </summary>
/// <typeparam name="T">Entity实体类型，多表Join时可能应临时创建一个从主表实体类派生的新类并为其增加额外的属性，因为Join的其它表中的字段除了关系键会出现在主表实体的属性中，其它字段并不会出现，而通常你都需要查询出那些非关系键的字段</typeparam>
/// <param name="context">Entity上下文实例</param>
/// <param name="TableNames">单表时，表名，多表时，提供join子句，如：a inner join b on a.depatmentId=b.depatmentId inner join c on a.roleId=c.roleId</param>
/// <param name="PrimaryKey">主表主键，如a.Id</param>
/// <param name="Fields">期望查询出的字段，每个字段以逗号隔开或空字符，空字符则查询所有字段。指定字段如：a.userName,b.depatmentName,c.roleName……</param>
/// <param name="PageSize">每页显示几条记录?</param>
/// <param name="CurrentPage">页码</param>
/// <param name="Filter">where子句或空字符，带Where子句时不需要写where作前缀</param>
/// <param name="Group">group by子句或空字符，带group by子句时不需要写group by作前缀</param>
/// <param name="Order">order by子句或空字符，带order by子句时不需要写order by作前缀，如：a.Id desc,b.depatmentName asc</param>
/// <param name="RecordCount">总记录数</param>
/// <returns></returns>
public static List<T> GetPageList<T>( DbContext context , string TableNames , string PrimaryKey , string Fields , int PageSize , int CurrentPage , string Filter , string Group , string Order , ref int RecordCount)
{
SqlParameter [ ] parameters = {
new SqlParameter("@TableNames", TableNames),
new SqlParameter("@PrimaryKey", PrimaryKey),
new SqlParameter("@Fields", Fields),
new SqlParameter("@PageSize", PageSize),
new SqlParameter("@CurrentPage", CurrentPage),
new SqlParameter("@Filter", Filter),
new SqlParameter("@Group", Group),
new SqlParameter("@Order", Order),
new SqlParameter("@RecordCount", RecordCount)
};
parameters [ 8 ].Direction = ParameterDirection.Output;
var records = context.Database.SqlQuery<T> ( "exec usp_PagingLarge @TableNames,@PrimaryKey,@Fields,@PageSize,@CurrentPage,@Filter,@Group,@Order,@RecordCount output" , parameters );
var List = records.ToList ( );
RecordCount = ( int ) parameters [ 8 ].Value;
// 返回记录总数
return List;
}
}
}
Pager
GridPanel分页
客户端ExtJs
Ext.define("UserManagerModel", {
extend: "Ext.data.Model",
fields: [
{ name: "UserId", type: "int" },
{ name: "RoseName", type: "string" }, //引用了权限表
{ name: "DepartmentName", type: "string" }, //引用了部门表
{ name: "LoginName", type: "string" },
{ name: "UserName", type: "string" },
{ name: "Mobile", type: "string" },
{ name: "Email", type: "string" },
{ name: "Photo", type: "string" },
{ name: "Address", type: "string" },
{ name: "Birthday", type: "string" },
{ name: "Sex", type: "string" },
{ name: "Sate", type: "string" }
]
});
//分页数据存储器
Ext.create("Ext.data.Store", {
storeId: "UserManagerDataStore",
model: "UserManagerModel",
autoLoad:true,
pageSize: 10,//每页显示10条记录
proxy: {
type: "ajax",
url: "/Ashx/RecordsHandler.ashx",
extraParams: { params: { start: 0, limit: 10 } },
reader: {
type: "json",
totalProperty: 'totalProperty', //此为默认，表示记录总数
idProperty: 'UserId', //数据模型的主键
root:"root"
}
}
});
var columns = [
{ xtype: "rownumberer" },//第一列显示行号
{ header: "登录名", dataIndex: "LoginName" },
{ header: "真实姓名", dataIndex: "UserName" },
{
header: "头像", dataIndex: "Photo", renderer: function (v) {
return "<img style='width:30%;height:30%;' src='" + v + "' />"
}
},
{ header: "角色", dataIndex: "RoseName" },
{ header: "所属部门", dataIndex: "DepartmentName" },
{ header: "生日", dataIndex: "Birthday" },
{ header: "手机", dataIndex: "Mobile" },
{ header: "电邮", dataIndex: "Email" },
{ header: "住址", dataIndex: "Address" },
{
header: "性别", dataIndex: "Sex", renderer: function (v) {
if (v == "true") { return "男" }
return "女";
}
},
{
header: "在职状态", dataIndex: "Sate", renderer: function (v) {
if (v == "true") { return "在职" }
return "离职";
}
},
];
Ext.create("Ext.grid.Panel", {
title: "员工信息查询",
renderTo: "employeeMsg",
forceFit: true,
frame: false,
height:500,
store: "UserManagerDataStore",
columns: columns,
//显示分页信息的工具栏
bbar: new Ext.PagingToolbar({
store: "UserManagerDataStore",
displayInfo: true,//是否显示分页的额外信息
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',//displayInfo为true时，此属性才能生效
emptyMsg: "没有记录"
})
});
服务端
如果分页的Aajx请求的是ASP.NET MVC的Action方法，则需要注意：首次请求页面时应返回视图，视图里的ExtJs被成功加载到客户端后才会开启Ajax请求，所以首次加载视图时应返回一个view而不可能是分页数据，视图渲染完毕后store才会发起Ajax请求到另一个Action，这时，你才能request到分页参数。而下面使用的是ashx文件，视图已经呈现，所以不存在像在Action方法中无法获取分页参数的问题。
{
// Entity不支持返回多表，此处需要定义一个UserManager的派生，以便可以将查询结果中的DepartmentName和RoseName装入UnkonwObj
public class UnkonwObj:UserManager
{
public string DepartmentName { get; set; }
public string RoseName { get; set; }
}
public class RecordsHandler : IHttpHandler
{
public void ProcessRequest( HttpContext context )
{
var Response = context.Response;
var Request = context.Request;
Response.ContentType = "text/plain";
System.Text.StringBuilder s = new System.Text.StringBuilder ( );
//当前页码上的第一条记录的索引
int start = int.Parse ( context.Request [ "start" ] );
//每页显示几条记录
int limit = int.Parse ( context.Request [ "limit" ] );
//计算页码
int pageIndex = start / limit ;
//分页后的总页数
int pageCount = 0;
//获取表的分页记录
int recordCount = 0;
//jion句子
string tablejoin = "UserManagers inner join Departments on UserManagers.DepartmentId=Departments.DepartmentId inner join TbRoses on UserManagers.TbRoseId=TbRoses.TbRoseId ";
using ( var DBContext = new ErpContext ( ) )
{
//分页
var List = Pager.GetPageList<UnkonwObj> ( DBContext , tablejoin , "UserManagers.UserId" , "" , limit , pageIndex , "" , "" , "UserManagers.UserId" , ref recordCount);
//将记录序列化为Json格式的字符表示且分页必须加入totalProperty属性供客户端ExtJs获取并作出计算
s.Append ( JsonConvert.SerializeObject ( List , Formatting.Indented ).Insert ( 0 , "root:" ).Insert ( 0 , "totalProperty:" + recordCount + "," ).Insert ( 0 , "{" ) ).Append("}");
context.Response.Write ( s.ToString() );
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
下拉框分页
起始跟上面的grid分页完全一样，只需要在combobox里指定pageSize的值>0就OK。
客户端
Ext.define("UserManagerModel", {
extend: "Ext.data.Model",
fields: [
{ name: "UserId", type: "int" },
{ name: "UserName", type: "string" }
]
});
//员工数据存储器
Ext.create("Ext.data.Store", {
storeId: "UserManagerStore",
model: "UserManagerModel",
autoLoad: true,
pageSize: 5,//每页显示5条记录
proxy: {
type: "ajax",
url: "/Ashx/ComboboxHandler.ashx",
extraParams: { params: { start: 0, limit: 5 }, comboboxType: "userManagerModel" },
reader: {
type: "json",
totalProperty: 'totalProperty', //此为默认，表示记录总数
idProperty: 'UserId', //数据模型的主键
root: "root"
}
}
});
{
xtype: "combobox",
id: "UserId",
width:410,
fieldLabel: "仓库管理员",
emptyText: "------选择仓库管理员------",
store: "UserManagerStore",
mode: "remote",
triggerAction: "all",
displayField: "UserName",
valueField: "UserId",
editable: false,
listConfig: {
loadingText: '查找中.',
emptyText: '没有符合的数据',
},
pageSize: 5 //下拉列表框的分页大小,大于0则自动创建分页栏
}
服务端
int start = int.Parse ( context.Request [ "start" ] );
int limit = int.Parse ( context.Request [ "limit" ] );
int pageIndex = start / limit;
int recordCount = 0;
var List = Pager.GetPageList<UserManager> ( DBContext , "UserManagers" , "UserManagers.UserId" , "" , limit , pageIndex , "" , "" , "UserManagers.UserId" , ref recordCount );
s.Append ( JsonConvert.SerializeObject ( List , Formatting.Indented ).Insert ( 0 , "root:" ).Insert ( 0 , "totalProperty:" + recordCount + "," ).Insert ( 0 , "{" ) ).Append ( "}" );
Response.Write ( s.ToString ( ) );
下拉框智能提示
根据用户输入的关键字进行查询，将查询的数据显示在下拉项中，当用户从下拉项选中一条记录后，触发combobox的select事件，动态为GridPanel所绑定的Store添加查询参数，动态改变表格的数据。
function CreateStoreBySearchKey(options) {
var StoreID = options.StoreID;
var comboID = options.comboID;
var valueField = options.valueField;
var displayField = options.displayField;
var start = options.start;
var limit = options.limit;
var pageSize = options.pageSize;
var url = options.url;
var idProperty = options.idProperty;
var root = options.root;
var highlightColor = options.highlightColor;
var combobox = Ext.getCmp(comboID);
Ext.define(StoreID + "Model", {
extend: "Ext.data.Model",
fields: [
{ name: valueField, type: "int" },
{ name: displayField, type: "string" }
]
});
return Ext.create("Ext.data.Store", {
storeId: StoreID,
autoLoad: false,
model: StoreID + "Model",
pageSize: pageSize,
proxy: {
type: "ajax",
url: url,
extraParams: { params: { start: start, limit: limit } },
reader: {
type: "json",
totalProperty: "totalProperty",
idProperty: idProperty,
root: root
}
},
listeners: {
load: function (me, records) {
//高亮searchKey
var val = Ext.getCmp(comboID);
Ext.each(records, function (record) {
record.set(val.displayField, record.get(val.displayField).replace(new RegExp(val.getRawValue(), "gm"), "<b style='background:" + highlightColor + "'>" + val.getRawValue() + "</b>"));
});
}
}
});
}
调用CreateStoreBySearchKey函数将自动创建存储器和模型，不需要手动创建，但需为自动创建的Store显示地指定一个名称即可，如下所示：
xtype: "panel",
width: 320,
border:false,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: "StockTableKeySearchCombo",
store: CreateStoreBySearchKey({
StoreID: "StockTableKeySearchStore",
comboID: "StockTableKeySearchCombo",
displayField: "StockName",
valueField: "StockTableId",
url: "/Ashx/SearchByKey.ashx",
pageSize: 10,
start: 0,
limit: 10,
idProperty: "StockTableId",
root: "root",
highlightColor: "yellow"
}),
displayField: 'StockName',
valueField: "StockTableId",
emptyText:"根据仓库名查询",
minChars: 1, //最小中文字符
typeAheadDelay: 2000,//等待用户输入文本的毫秒数
typeAhead: true,//配置了typeAheadDelay后可使用此项，表示用户输入的内容能完整匹配下拉列表中的某条记录时将自动把后半截内容追加到输入框
hideLabel: true,
hideTrigger: true,
enableKeyEvents :true,
anchor: '100%',
multiSelect: false,
queryDelay: 1000,
queryMode: 'remote',
listeners: {
//嵌入查询图标
afterrender: function () {
this.setFieldStyle("background: url(/Img/Ico/search.png) no-repeat 8px center;padding-left:26px;");
},
//没有输入项时折叠下拉框同时使GridPanel绑定的Store重载
keyup: function (field) {
if (field.getRawValue() == "") {
this.collapse(true);
Ext.getStore("StockTableStore").fireEvent("beforeload");
Ext.getStore("StockTableStore").reload();//重载
}
},
select: function (field, newVal, oldVal) {
var textVal = field.getRawValue();
var pureText = textVal.replace(/<[^>]+>/g, "");//去掉高亮的html标记
field.setValue(pureText);
Ext.getStore("StockTableStore").fireEvent("beforeload"); //用户输入了查询参数，手动触发GridPanel所绑定的Store的beforeload事件，在事件中添加了查询参数=当前用户选择的文本
Ext.getStore("StockTableStore").reload();//重载
}
},
queryParam: 'StockTableKeySearch', //查询参数变量名，默认为 query，服务端通过Request["query"]获取，此变量名可以自定义
listConfig: {
loadingText: '查找中.',
emptyText: '没有符合的数据'
},
pageSize: 10 //下拉列表框的分页大小,大于0则自动创建分页栏
}
]
}
GridPanel.tbar
GridPanel的存储器
storeId: "StockTableStore",
model: "StockTableModel",
autoLoad: true,
pageSize: 10,//每页显示10条记录
proxy: {
type: "ajax",
url: "/Ashx/RecordsHandler.ashx",
extraParams: { params: { start: 0, limit: 10 }, selectType: "StockTableModel" },
reader: {
type: "json",
totalProperty: 'totalProperty', //此为默认，表示记录总数
idProperty: 'StockTableId', //数据模型的主键
root: "root"
}
},
listeners: {
beforeload: function () {
var comboCmp = Ext.getCmp("StockTableKeySearchCombo");
var SearchKey = comboCmp.getRawValue(); //用户选中下拉选项中的某一项记录的文本
/*如果需要获取ID，用combobox.getValue()居然只能得到文本，可考虑用在combobox的存储器上findBy查找与当前选中项的文本相匹配的ID，如：
var stockNameSearchValue = comboCmp.getRawValue();
var mixcollections = comboCmp.getStore().queryBy(function (record, id) {
清除高亮的html后进行比较
return record.get("StockName").replace(/<[^>]+>/g, "") == SearchKey
});
if (mixcollections.getCount() != 0) {
mixcollections = mixcollections.getRange()[0];
SearchID = mixcollections.get("StockTableId"); 得到ID
}*/
//向Store追加查询参数
Ext.apply(this.proxy.extraParams, { SearchKey: SearchKey ? SearchKey : "", /*SearchID: SearchID ? SearchID : ""*/ });
}
}
});
// #endregion
View Code
combobox的查询分页：服务端根据用户输入的关键字进行查询，然后将数据显示在下拉框选项中：
GridPanel的查询分页：服务端根据用户选择的下拉框选项的文本进行查询：
完整代码包含了其它非智能提示的功能，一并扔这了：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>仓库管理</title>
<script type="text/javascript" src="/ExtJs/ext-all-dev.js"></script>
<script type="text/javascript" src="/ExtJs/ext-lang-zh_CN.js"></script>
@Html.Partial( "LoadCssAndJs" )
<script src="/ExtJs/ux/MultiSelect.js"></script>
<script src="/ExtJs/ux/ItemSelector.js"></script>
<link href="/ExtJs/ux/css/ItemSelector.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.formOperating.js"></script>
<style>
#DrugsErpCompanyItemselector {border: 1px solid #B5B8C8; }
#DrugsErpCompanyItemselector .x-boundlist { /*background: #DFEAF2;*/ }
#DrugsErpCompanyItemselector * { border: none;}
.panelBoder * {border: none;}
.panelRedBoder { border: 1px solid red; }
/*按钮a标签*/
.x-btn { text-decoration: none !important; }
.x-grid-cell-inner-action-col { text-align: center !important; }
</style>
</head>
<body class="flat-blue">
<div class="app-container">
<div class="row content-container">
<!--顶部导航-->
@Html.Partial( "TopNavbar" )
<!--左侧功能菜单-->
@Html.Partial( "FearturesTreeMenu" )
<!-- 右侧内容 -->
<div class="container-fluid">
<div class="side-body padding-top">
<dov id="box"></dov><!--表单-->
<!--itemselectorBox-->
</div>
</div>
</div>
<!-- 注脚 -->
@ViewData[ "Test" ]
@Html.Partial( "Footerbar" )
</div>
</body>
</html>
<script>
new Ext.QuickTips.init();//初始化提示信息类
Ext.form.Field.prototype.msgTarget = "title";//显示验证提示信息时为title模式
// #region 构造适用于gridPanel、TreePanel的全选反选取消的右键菜单
//hostComponent：右键菜单的宿主（一个gridPanel或TreePanel）
//如果IsComplete为true，则返回一个实现全选反选取消的完整菜单
//否则只返回一个实现全选反选取消的菜单子项，在函数外部可调用Ext.menu.Menu的add方法将子项添加到右键菜单中
function createSelectContextMenu(hostComponent, event, IsComplete) {
event.preventDefault();
var selModel = hostComponent.getSelectionModel();
var records = hostComponent.getStore().getRange();
//创建菜单子项
var items = [
{
text: "全选",
handler: function () {
selModel.selectAll();
}
},
{
text: "反选",
handler: function () {
records.forEach(function (r) {
var isSelected = selModel.isSelected(r);
if (isSelected) {
selModel.deselect(r);
}
else {
selModel.select(r, true);
}
});
}
},
{
text: "全部取消",
handler: function () {
selModel.deselectAll();
}
}
];
//创建完整菜单
var contextmenu = Ext.create("Ext.menu.Menu", {
items: items,
listeners: {
deactivate: function (menuSelf) {
menuSelf.destroy(); //消失后销毁自身
}
}
});
return IsComplete ? contextmenu : items;
}
// #endregion
// #region GridPanel编辑状态下弹出多选框，读取默认值。打包
function CreateItemselectorEditWindow(options) {
var windowTitle = options.windowTitle;
var fieldsetTitle = options.fieldsetTitle;
var storeId = options.storeId;
var editRecord = options.editRecord;
var tableModelFieldText = options.tableModelFieldText;
var tableModelFieldKey = options.tableModelFieldKey;
var cellModelFieldText = options.cellModelFieldText;
var cellModelFieldKey = options.cellModelFieldKey;
//将当前要编辑的记录取出来存入oldRec
var oldRecs = [];
var Keys = editRecord.get(tableModelFieldKey);
var Texts = editRecord.get(tableModelFieldText);
for (var i = 0; i < Keys.length; i++) {
var obj = {
[cellModelFieldKey]: Keys[i],
[cellModelFieldText]: Texts[i]
};
oldRecs.push(obj);
}
Ext.create("Ext.window.Window", {
id: "EditWin",
title: windowTitle,
autoShow: true,
forceFit: true,
width: 800,
style: "border:none;padding:10px;",
border: false,
modal: true,
layout: "anchor",
items: [
//创建表单
Ext.create("Ext.form.Panel", {
id: "EditForm",
forceFit: true,
style: "border:none;padding:10px;",
border: false,
items: [
{
xtype: "fieldset",
title: fieldsetTitle,
columnWidth: .100,
style: "padding:10px;",
items: [
{
xtype: "panel",
layout: "fit",
cls: "panelBoder",
height: 220,
items: [
{
xtype: 'itemselector',
anchor: '100%',
id: 'xItemSelector',
style: "margin-bottom:10px;",
imagePath: '/ExtJs/ux/css/images/',
store: storeId,
displayField: cellModelFieldText,
valueField: cellModelFieldKey,
allowBlank: false,
blankText: "必须选择至少一项",
msgTarget: "title",
fromTitle: '可选',
toTitle: '已选',
listeners: {
afterrender: function () {
var xItemSelector = Ext.getCmp("xItemSelector");
var store = Ext.getStore(storeId);
store.add(oldRecs);//将当前编辑的记录插入存储器
var newRecs = store.getNewRecords();//获取刚插入的记录
xItemSelector.bindStore(store); //刷新数据存储器
xItemSelector.moveRec(true, newRecs); //将参数指定的记录插入到右侧选择框
var selectedRecords = xItemSelector.toField.store.getRange();
if (!window.xItemSelectorOldVal) { window.xItemSelectorOldVal = [] };
window.xItemSelectorOldVal = selectedRecords;
if (!window.xItemSelectorDefaultVal) { window.xItemSelectorDefaultVal = [] };//存储当前编辑的记录，以便还原为默认选中项
window.xItemSelectorDefaultVal = newRecs;
}
}
}
],
bbar: [
{
xtype: "pagingtoolbar",
store: storeId,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录",
listeners: {
beforechange: function () {
var xItemSelector = Ext.getCmp("xItemSelector");
var selectedRecords = xItemSelector.toField.store.getRange();
if (!window.xItemSelectorOldVal) { window.xItemSelectorOldVal = [] };
window.xItemSelectorOldVal = selectedRecords;
xItemSelector.fromField.store.removeAll();
}
}
},
{
xtype: "panel",
items: [
{
xtype: "button", text: "撤回所选", style: "background:red;border:none;margin:10px 0;", handler: function () {
var xItemSelector = Ext.getCmp("xItemSelector");
var oldVal = window.xItemSelectorOldVal;
if (oldVal) {
xItemSelector.getStore().add(oldVal);
window.xItemSelectorOldVal = null;
}
xItemSelector.clearValue();
}
},
{
xtype: "button",
text: "还原默认选中项",
style: "background:red;border:none;margin:10px 10px;",
handler: function () {
var xItemSelector = Ext.getCmp("xItemSelector");
xItemSelector.fromField.store.removeAll();
xItemSelector.bindStore(xItemSelector.getStore());
xItemSelector.getStore().add(window.xItemSelectorDefaultVal);
xItemSelector.moveRec(true, window.xItemSelectorDefaultVal);//还原默认选择项
}
}
],
}
]
}
]
}
],
buttons: [
{
text: "确定", handler: function () {
var xItemSelector = Ext.getCmp("xItemSelector");
var xItemSelectorVal = Ext.getCmp("xItemSelector").getValue();
if (xItemSelectorVal.length == 0) {
xItemSelector.up("panel").addCls("panelRedBoder");
}
else {
xItemSelector.up("panel").removeCls("panelRedBoder");
Ext.Ajax.request({
method: "post",
url: "/StockTable/UpdateStockUser",
params: { xStockUserIDs: xItemSelectorVal.join(","), xStockID: editRecord.get("StockTableId") },
success: function (r) {
var m = Ext.decode(r.responseText);
Ext.create('Ext.window.MessageBox', {
style: "border:none;",
frame: false,
border: false
}).
show({
title: "提示",
msg: m.msg,
buttons: Ext.MessageBox.YES,
width: 300,
icon: Ext.MessageBox.YES
});
Ext.getStore("StockTableStore").reload();
},
failure: function () { }
});
}
}
}
]
})
],
listeners: {
beforeclose: function () { //销毁所有组件和存储器
var store = Ext.getStore(storeId);
this.destroy();
Ext.StoreManager.remove(store);
if (window.xItemSelectorDefaultVal) { window.xItemSelectorDefaultVal = null };
},
close: function () { }
}
});
}
// #endregion
// #region 返回被污染过的脏数据集合，这包含了所有被选中的下拉框选项的value
//gridStoreID：gridPanel的数据存储器的storeId
//cArray是数组，displayField：下拉框的key，valueField：下拉框的value，gridText：当前下拉框在gird中的字段名，comboStoreID：下拉框数据存储器的storeId
function GetDityRec(gridStoreID, cArray) {
//获取gridPanel中的脏数据
var drityDatas = Ext.getStore(gridStoreID).getModifiedRecords();
var submitRecord = [];
var transcript;
//遍历每条记录
drityDatas.forEach(function (gridRecord) {
Ext.each(cArray, function (obj) {
//获取下拉框数据存储器
var comboStore = Ext.getStore(obj.comboStoreID);
var key = gridRecord.get(obj.gridDisplayField);
comboStore.findBy(function (comboRecord) {
if (comboRecord.get(obj.displayField) == key) {
if (cArray.indexOf(obj) == 0) {
transcript = gridRecord.data;//首次应拷贝行的副本，此后则直接赋值
}
transcript[obj.gridDisplayValueField] = parseInt(comboRecord.get(obj.valueField));
}
});
});
submitRecord.push(transcript);
});
return submitRecord;
}
// #endregion
// #region 根据用户输入的文本智能联想加载符合的数据
function CreateStoreBySearchKey(options) {
var StoreID = options.StoreID;
var comboID = options.comboID;
var valueField = options.valueField;
var displayField = options.displayField;
var start = options.start;
var limit = options.limit;
var pageSize = options.pageSize;
var url = options.url;
var idProperty = options.idProperty;
var root = options.root;
var highlightColor = options.highlightColor;
var combobox = Ext.getCmp(comboID);
Ext.define(StoreID + "Model", {
extend: "Ext.data.Model",
fields: [
{ name: valueField, type: "int" },
{ name: displayField, type: "string" }
]
});
return Ext.create("Ext.data.Store", {
storeId: StoreID,
autoLoad: false,
model: StoreID + "Model",
pageSize: pageSize,
proxy: {
type: "ajax",
url: url,
extraParams: { params: { start: start, limit: limit } },
reader: {
type: "json",
totalProperty: "totalProperty",
idProperty: idProperty,
root: root
}
},
listeners: {
load: function (me, records) {
//高亮searchKey
var val = Ext.getCmp(comboID);
Ext.each(records, function (record) {
record.set(val.displayField, record.get(val.displayField).replace(new RegExp(val.getRawValue(), "gm"), "<b style='background:" + highlightColor + "'>" + val.getRawValue() + "</b>"));
});
}
}
});
}
// #endregion
Ext.onReady(function () {
// #region 公司数据模型
Ext.define("DrugsErpCompanyTableModel", {
extend: "Ext.data.Model",
fields: [
{ name: "DrugsErpCompanyTableId", type: "int" },
{ name: "CompanyName", type: "string" }
]
});
// #endregion
// #region 公司数据存储器
Ext.create("Ext.data.Store", {
storeId: "DrugsErpCompanyTableStore",
model: "DrugsErpCompanyTableModel",
autoLoad: true,
pageSize: 5,//每页显示5条记录
proxy: {
type: "ajax",
url: "/Ashx/ComboboxHandler.ashx",
extraParams: { params: { start: 0, limit: 5 }, comboboxType: "drugsErpCompanyTableModel" },
reader: {
type: "json",
totalProperty: 'totalProperty', //此为默认，表示记录总数
idProperty: 'DrugsErpCompanyTableId', //数据模型的主键
root: "root"
}
}
});
// #endregion
// #region 仓库数据模型
Ext.define("StockTableModel", {
extend: "Ext.data.Model",
fields: [
{ name: "StockTableId", type: "int" },
{ name: "StockName", type: "string" },
{ name: "DrugsErpCompanyTableId", type: "int" },
{ name: "CompanyName", type: "string" },
{ name: "StockAddress", type: "string" },
{ name: "UserIDs", type: "auto" },
{ name: "UserNames", type: "auto" }
]
});
// #endregion
// #region 仓库信息分页数据存储器
Ext.create("Ext.data.Store", {
storeId: "StockTableStore",
model: "StockTableModel",
autoLoad: true,
pageSize: 10,//每页显示10条记录
proxy: {
type: "ajax",
url: "/Ashx/RecordsHandler.ashx",
extraParams: { params: { start: 0, limit: 10 }, selectType: "StockTableModel" },
reader: {
type: "json",
totalProperty: 'totalProperty', //此为默认，表示记录总数
idProperty: 'StockTableId', //数据模型的主键
root: "root"
}
},
listeners: {
beforeload: function () {
var stockNameSearchKey = Ext.getCmp("StockTableKeySearchCombo").getValue();
var drugsErpCompanySearchKey = Ext.getCmp("DrugsErpCompanyTableKeySearchCombo").getValue();
var rec = Ext.getCmp("DrugsErpCompanyTableKeySearchCombo").getStore().queryBy(function (record, id) {
return record.get("CompanyName").replace(/<[^>]+>/g, "") == drugsErpCompanySearchKey
});
if (rec.getCount() != 0) {
rec = rec.getRange()[0];
drugsErpCompanySearchKey = rec.get("DrugsErpCompanyTableId");
}
Ext.apply(this.proxy.extraParams, { drugsErpCompanySearchKey: drugsErpCompanySearchKey ? drugsErpCompanySearchKey : "", stockNameSearchKey: stockNameSearchKey ? stockNameSearchKey : "" });
}
}
});
// #endregion
// #region 仓库信息列配置
var columns = [
{ xtype: "rownumberer" },
{
header: "仓库名称", dataIndex: "StockName",
editor: {
xtype: "textfield",
allowBlank: false,//不允许空值
selectOnFocus: true//点开编辑时自动选中值以便于用户删除。
}
},
{
header: "所属公司", dataIndex: "CompanyName",
editor: {
xtype: "combobox", id: "DrugsErpCompanyComboEdit", store: "DrugsErpCompanyTableStore", mode: "remote", triggerAction: "all", displayField: "CompanyName", valueField: "CompanyName", editable: false,
istConfig: {
loadingText: '查找中.',
emptyText: '没有符合的数据',
},
pageSize: 5 //下拉列表框的分页大小,大于0则自动创建分页栏
}
},
{
header: "仓库地址", dataIndex: "StockAddress",
editor: {
xtype: "textfield",
allowBlank: false,//不允许空值
selectOnFocus: true//点开编辑时自动选中值以便于用户删除。
}
},
{
header: "仓库管理员", dataIndex: "UserNames",
editor: {}
},
//特殊列
{
xtype: 'actioncolumn',
text: '操作',
width:20,
items: [
{
tooltip: "删除", icon: '/Img/Ico/del.png',
handler: function (view, rowIndex, colIndex, node, e, record, rowEl) {
Ext.create('Ext.window.MessageBox', {
style: "border:none;",
frame: false,
border: false
}).show({
title: "警告",
msg: "确定要删除吗?",
buttons: Ext.MessageBox.YESNO,
width: 300,
icon: Ext.MessageBox.WARNING,
fn: function (m) {
if (m == "yes") {
Ext.Ajax.request({
method: "post",
url: "/StockTable/DelStockTable",
params: { ID: record.get("StockTableId"), delType: "Single" },
success: function (m) {
var m = Ext.decode(m.responseText);
Ext.Msg.alert("", m.msg);
Ext.getStore("StockTableStore").removeAt(rowIndex);
},
failure: function () {
Ext.Msg.alert("", "http错误");
}
});
}
}
});
}
}
]
}
];
// #endregion
// #region 仓库表格
Ext.create("Ext.grid.Panel", {
id: "StockTablePanel",
title: "仓库信息查询",
renderTo: "box",
forceFit: true,
frame: false,
height: 500,
store: "StockTableStore",
columns: columns,
selModel: new Ext.selection.CheckboxModel({ checkOnly: false, ignoreRightMouseSelection: true }),
tbar: [
{
text: "批量删除", id: "batchDelBtn", style: "background:white;border:none;",
disabled: true, handler: function () {
Ext.create('Ext.window.MessageBox', {
style: "border:none;",
frame: false,
border: false
}).show({
title: "提示",
msg: "暂时不提供批量删除",
buttons: Ext.MessageBox.YES,
width: 300,
icon: Ext.MessageBox.WARNING
});
}
},
{
text: "批量更新", id: "batchUpdateBtn", style: "background:white;border:none;",
handler: function () {
var c = [
{ displayField: "CompanyName", valueField: "DrugsErpCompanyTableId", gridDisplayField: "CompanyName", gridDisplayValueField:"DrugsErpCompanyTableId",comboStoreID: "DrugsErpCompanyTableStore" },
];
var dityRecords = GetDityRec("StockTableStore", c);
if (dityRecords.length == 0) {
Ext.create('Ext.window.MessageBox', {
style: "border:none;",
frame: false,
border: false
}).show({
title: "提示",
msg: "未做任何改动",
buttons: Ext.MessageBox.YES,
width: 300,
icon: Ext.MessageBox.WARNING
});
return;
}
Ext.Ajax.request({
method:"post",
url: "/StockTable/UpdateStockTable",
params: {xStockTable:Ext.encode(dityRecords)},
success: function (r) {
var m = Ext.decode(r.responseText);
Ext.create('Ext.window.MessageBox', {
style: "border:none;",
frame: false,
border: false
}). show({
title: "提示",
msg: m.msg,
buttons: Ext.MessageBox.YES,
width: 300,
icon: Ext.MessageBox.YES
});
Ext.getStore("StockTableStore").reload();
},
failure: function () { }
});
}
},
{
xtype: "panel",
width: 320,
border:false,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: "StockTableKeySearchCombo",
store: CreateStoreBySearchKey({
StoreID: "StockTableKeySearchStore",
comboID: "StockTableKeySearchCombo",
displayField: "StockName",
valueField: "StockTableId",
url: "/Ashx/SearchByKey.ashx",
pageSize: 10,
start: 0,
limit: 10,
idProperty: "StockTableId",
root: "root",
highlightColor: "yellow"
}),
displayField: 'StockName',
valueField: "StockTableId",
emptyText:"根据仓库名查询",
minChars: 1, //最小中文字符
typeAheadDelay: 2000,//等待用户输入文本的毫秒数
typeAhead: true,//配置了typeAheadDelay后可使用此项，表示用户输入的内容能完整匹配下拉列表中的某条记录时将自动把后半截内容追加到输入框
hideLabel: true,
hideTrigger: true,
enableKeyEvents :true,
anchor: '100%',
multiSelect: false,
queryDelay: 1000,
queryMode: 'remote',
listeners: {
//嵌入查询图标
afterrender: function () {
this.setFieldStyle("background: url(/Img/Ico/search.png) no-repeat 8px center;padding-left:26px;");
},
//没有输入项时折叠下拉框同时使GridPanel绑定的Store重载
keyup: function (field) {
if (field.getRawValue() == "") {
this.collapse(true);
Ext.getStore("StockTableStore").fireEvent("beforeload");
Ext.getStore("StockTableStore").reload();//重载
}
},
select: function (field, newVal, oldVal) {
var textVal = field.getRawValue();
var pureText = textVal.replace(/<[^>]+>/g, "");//去掉高亮的html标记
field.setValue(pureText);
Ext.getStore("StockTableStore").fireEvent("beforeload"); //用户输入了查询参数，手动触发GridPanel所绑定的Store的beforeload事件，在事件中添加了查询参数=当前用户选择的文本
Ext.getStore("StockTableStore").reload();//重载
}
},
queryParam: 'StockTableKeySearch', //查询参数变量名，默认为 query，服务端通过Request["query"]获取，此变量名可以自定义
listConfig: {
loadingText: '查找中.',
emptyText: '没有符合的数据'
},
pageSize: 10 //下拉列表框的分页大小,大于0则自动创建分页栏
}
]
},
{
xtype: "panel",
width: 320,
border: false,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: "DrugsErpCompanyTableKeySearchCombo",
store: CreateStoreBySearchKey({
StoreID: "DrugsErpCompanyTableKeySearchStore",
comboID: "DrugsErpCompanyTableKeySearchCombo",
displayField: "CompanyName",
valueField: "DrugsErpCompanyTableId",
url: "/Ashx/SearchByKey.ashx",
pageSize: 10,
start: 0,
limit: 10,
idProperty: "DrugsErpCompanyTableId",
root: "root",
highlightColor: "yellow"
}),
displayField: 'CompanyName',
valueField: "DrugsErpCompanyTableId",
emptyText: "根据所属公司查询",
minChars: 1, //最小中文字符
typeAheadDelay: 2000,//等待用户输入文本的毫秒数
typeAhead: true,//配置了typeAheadDelay后可使用此项，表示用户输入的内容能完整匹配下拉列表中的某条记录时将自动把后半截内容追加到输入框
hideLabel: true,
hideTrigger: true,
enableKeyEvents: true,
anchor: '100%',
multiSelect: false,
queryDelay: 1000,
queryMode: 'remote',
listeners: {
//嵌入查询图标
afterrender: function () {
this.setFieldStyle("background: url(/Img/Ico/search.png) no-repeat 8px center;padding-left:26px;");
},
//没有输入项时折叠下拉框同时使GridPanel绑定的Store重载
keyup: function (field) {
if (field.getRawValue() == "") {
this.collapse(true);
Ext.getStore("StockTableStore").fireEvent("beforeload");
Ext.getStore("StockTableStore").reload();//重载
}
},
select: function (field, newVal, oldVal) {
var textVal = field.getRawValue();
var pureText = textVal.replace(/<[^>]+>/g, "");//去掉高亮的html标记
field.setValue(pureText);
Ext.getStore("StockTableStore").fireEvent("beforeload"); //用户输入了查询参数，手动触发GridPanel所绑定的Store的beforeload事件，在事件中添加了查询参数=当前用户选择的文本
Ext.getStore("StockTableStore").reload();//重载
}
},
queryParam: 'DrugsErpCompanyTableKeySearch', //查询参数变量名，默认为 query，服务端通过Request["query"]获取，此变量名可以自定义
listConfig: {
loadingText: '查找中.',
emptyText: '没有符合的数据'
},
pageSize: 10 //下拉列表框的分页大小,大于0则自动创建分页栏
}
]
}
],
bbar:[
{
xtype:"pagingtoolbar",
store: "StockTableStore",
displayInfo: true,//是否显示分页的额外信息
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',//displayInfo为true时，此属性才能生效
emptyMsg: "没有记录"
}
],
listeners: {
selectionchange: function (selectionModel, selectedRow){
if (selectionModel.selected.length > 1) {
this.query("button[id='batchDelBtn']")[0].enable();
return;
}
this.query("button[id='batchDelBtn']")[0].disable();
},
itemcontextmenu: function (view, record, item, index, e) {
var menu = createSelectContextMenu(this, e, true);
menu.showAt(e.getXY());
}
},
plugins: [
{
ptype: "cellediting",
clicksToEdit: 2,
listeners: {
//编辑某记录时在函数中创建弹出窗口同时定义记录所对应的模型和存储器
beforeedit: function (editor, context) {
if (context.colIdx == 5) {
// #region 员工数据模型
Ext.define("UserManagerModel", {
extend: "Ext.data.Model",
fields: [
{ name: "UserId", type: "int" },
{ name: "UserName", type: "string" }
]
});
// #endregion
// #region 员工数据存储器
Ext.create("Ext.data.Store", {
storeId: "UserManagerStore",
model: "UserManagerModel",
autoLoad: true,
pageSize: 5,//每页显示5条记录
proxy: {
type: "ajax",
url: "/Ashx/ComboboxHandler.ashx",
extraParams: { params: { start: 0, limit: 5 }, comboboxType: "userManagerModel", editExcludeID: Ext.encode(context.record.get("UserIDs")) }, //排除当前列数据的ID
reader: {
type: "json",
totalProperty: 'totalProperty', //此为默认，表示记录总数
idProperty: 'UserId', //数据模型的主键
root: "root"
}
}
});
// #endregion
//创建多选框
CreateItemselectorEditWindow({
windowTitle: "正在编辑……",
fieldsetTitle:"选择仓库管理员",
storeId: "UserManagerStore",
tableModelFieldText: "UserNames",//GridPanel的Store所绑定的数据模型（DataModel）中的数组（auto）字段，显示在表格列上的多个文本所代表的字段名
tableModelFieldKey: "UserIDs",//GridPanel的Store所绑定的数据模型（Model）中的数组（auto）字段，显示在表格列上的多个文本所对应的键的字段名
cellModelFieldText: "UserName", //被编辑的列所对应的数据模型（DataModel）中的key
cellModelFieldKey: "UserId",//被编辑的列所对应的数据模型（DataModel）中的Value
editRecord: context.record
});
return false;
}
}
}
}
]
});
// #endregion
});
</script>
Full Code
分页带额外参数
Javascript - 学习总目录
转载于:https://www.cnblogs.com/myrocknroll/p/7099960.html
Javascript - ExtJs - 组件 - 分页相关推荐
- 多叉树结合JavaScript树形组件实现无限级树形结构（一种构建多级有序树形结构JSON（或XML）数据源的方法）
一.问题研究的背景和意义 在Web应用程序开发领域,基于Ajax技术的JavaScript树形组件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框 ...
- Webix 1.5发布：一个强大的JavaScript UI组件库
日前,XB公司发布了新版的Webix 1.5,较之前的版本,Webix 1.5增加了一些新的特性,并进行了一些改进.Webix是一个跨浏览器的JavaScript UI组件库,可以构建跨平台的HTML ...
- ExtJs 带分页的comboBox
ExtJs 带分页的comboBox 如何得到当前第几页? 希望技术牛人能帮帮我,也可以加我扣扣[445958], 交流JAVA Ext 框架等方面的技术! 转载于:https://blog.51 ...
- ExtJs Grid分页时序号自增的实现,以及查询以后的序号的处理
ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯.这里实现了序号的自动增加. 如:每页20条第一页从1开始,第二页从21条开始. 先定义一个全局变量如record ...
- 组件分页_如何创建分页组件
组件分页 The theme for week #17 of the Weekly Coding Challenge is: 每周编码挑战第17周的主题是: 分页 (Pagination) A Pag ...
- 【Kettle】 Javascript脚本组件
介绍 1.Kettle中可以通过脚本完成一些复杂的操作 2.javascript脚本就是使用javascript语言通过代码编程来完成对数据流的操作 3.JS中有很多内置函数,可以在编写JS代码时查看 ...
- Kendo UI Crack,完整的 JavaScript UI 组件库
Kendo UI Crack,完整的 JavaScript UI 组件库 Kendo UI 为当今所有流行的框架提供无缝支持,包括 jQuery.Angular.AngularJS.React 和 V ...
- Javascript - ExtJs - TreePanel组件
TreePanel组件(Ext.tree.TreePanel)logogram:Ext.tree.Panel | xtype:treepanel 树与节点 树面板组件的根是源头,从根上拓展出其它的子节 ...
- [转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
最新文章
- 使用GridView自带分页的代码
- 阿里重组AI实验室的背后主因，马云也无奈
- 食品安全溯源区块链解决方案探索-转载
- log-malloc2 0.2.4 发布
- 谈谈进程和线程的区别
- [Leetcode][第392题][JAVA][判断子序列][动态规划][双指针]
- mac下svn常用命令
- matlab二进制操作,[转载]Matlab二进制类型数据相关操作
- Spring中都用到了哪些设计模式
- 杭电2391--Filthy Rich（DP）
- 零值初始化字符串常数作为函数模板参数
- php的word插件,实现word在线预览 有php的写法 也有插件似
- python画航线图_数据可视化：python调用pyecharts库绘制航线专题图
- 用户生命周期，从运营到数据的最全攻略在这里
- 盲盒是怎么赚钱的（拆解盲盒App背后的盈利逻辑）
- c++ 智能指针 （std::weak_ptr）（三）
- 求矩阵的特征值和特征向量方法
- Python分布式爬虫原理
- 计算机取证（Computer Forensic）
- 高分屏笔记本显示模糊解决方法