CMS：文章管理之视图（1）

文章管理的视图与文件管理区别不大，都是分左右两部分。文章管理的左边是树状的分类列表，右边以Grid形式显示的文章列表。基本上重复劳动比较多，使用Sencha Architect这个可视化工具来做这方面的设计，是不错的选择，如果公司收益好，强烈建议使用，一个开发包的价格是399美金，大约2800人民币，还是很划得来的，起码比请多个程序员划得来。

废话又有点多了，转回正题，在Scripts\app\view目录下，创建一个Content目录，用来存放文章管理需要用到的视图，主要的视图包括文章管理的主视图、分类编辑窗口和文章编辑窗口。

接着，在Content目录下创建一个名称为View.js的文件，用来定义主视图，基本结构代码如下：

Ext.define('SimpleCMS.view.Content.View',{

extend: 'Ext.container.Container',

alias: 'widget.contentview',

layout:"border",

initComponent: function () {

var me = this;

me.callParent(arguments);

}

});

接下来就是一步步添加组件了，先完成树的定义，代码如下：

me.tree= Ext.widget("treepanel", {

title: "文章类别", region: "west", collapsible: true, rootVisible:true, store: "CategoriesTree",

width: 200, minWidth: 100, split: true

});

接着是Grid，代码如下：

me.grid= Ext.widget("grid", {

title: "文章列表", region: "center",

store: "Contents",

selType: "checkboxmodel",

selModel: { checkOnly: false, mode:"MULTI" },

columns: [

{ text: '编号', dataIndex: 'ContentId', width: 80},

{ text: '标题', dataIndex: 'Title', flex: 1 },

{xtype: "datecolumn", text: '创建时间', dataIndex: 'Created', format: "Y-m-d H:i:s", width: 150},

{ text: '排序序数', dataIndex: 'SortOrder', width: 80},

{ text: '点击量', dataIndex: 'Hits', width: 80 },

{ text: '标签', dataIndex: 'Tags',width:150 }

]

});

Grid使用了复选框作为选择行的方式，也是一向习惯了。其它方面，应该问题不大。

最后是将树和Grid放到容器里，代码如下：

me.items = [me.tree, me.grid];

现在，可以测试一下效果了，不过，这还有修改控制器，切换到文章管理的控制器，在init方法内创建视图，并添加到面板里，这个应该很熟悉了，在用户管理和图片管理已经做过了。忘记了就直接复制过来修改一下创建的视图就行了，具体代码如下：

var me= this,

panel = me.getContentPanel(),

view = Ext.widget("contentview");

panel.add(view);

代码的panel用到了getContentPanel方法，返回文章管理的面板，因而要添加引用，代码如下：

refs: [

{ ref: "ContentPanel", selector:"#contentPanel" },

],

当然了，不要忘记在views配置项内添加视图了，代码如下：

views:[

'Content.View'

],

在浏览器打开后，屏幕居然什么都没显示出来，而在Firebug居然显示两个“Layout run failed”错误，说明布局有问题。这个在之前也碰到过了，就是主面板定义中，没定义文章管理面板的布局，现在切换到主面板的视图，在文章管理的面板定义上加回布局定义，布局使用Fitlayout。

刷新一下浏览器，就可看到如图40的效果了。

图40 文章管理的界面

现在来完成分类树的功能，先完成树的显示。在完成前，先要用实体框架，将数据库中的表转换为对象。在解决方案内添加一个新项，然后如图41所示，在添加新项窗口中，先选择数据模版，然后在中间选择ADO.NET实体数据模型，将名称修改为SimpleCMS.edmx后，单击添加按钮。

图41 添加实体框架

在弹出的如图42所示的实体数据模型向导窗口中，选择从数据库生成，然后单击下一步。

图42 实体数据模型向导窗口

在切换到如图43所示的选择您的数据连接窗口中，可以单击新建连接按钮新建一个连接。在不过，默认的ApplicationServices连接是在配置文件中定义好的连接，可以直接使用，就不必再创建新的了。选上“是，在连接字符串中包括敏感数据”后，单击下一步按钮。当然，如果不喜欢在Web.Config文件包含用户名和密码这些敏感数据，可以另行处理。

图43 选择数据连接

在如图44所示的选择数据库对象窗口中，展开树中的表，然后如图那样选择以“T_”开头的4个表格，然后单击完成按钮结束向导。

图44 选择数据库对象

等待生成完成后，会在解决方案中看到如图45所示的数据结构图。

图45 生成的数据结构图

看到图，一定会疑惑，为什么刚才选择了4个表格，怎么在这里只看到3个对象？这是因为连接表T_Content和T_Tag的关联表在对象中只是一种多对多关系，隐含在对象中了，因而，不需要像数据库那样，显式的表示成一个对象。

这里还要为T_Category添加一个关联，让父节点可以找到它的子节点。在T_Category 的图中单击鼠标右键，在右键菜单中选择添加>关联，在如图46所示的添加关联对话框中，修改右边的实体为T_Category，接着修改左边的多重性为“0...1（零或一个）”。接着修改左边的导航属性为Childs，这样，就可通过childs属性访问子节点了。然后将右边的导航属性修改为Parent，这样,通过Parent属性就可访问到父节点了。把复选框的勾去掉后，单击确定按钮完成添加关联操作。

图46 添加关联对话框

接着在右边的属性列表中，编辑引用约束，在如图47的引用约束对话框中，选择主体为T_Category，然后在表格中将CategoryId的依赖属性设置为ParentId。

图47 引用约束对话框

保存一下解决方案，然后新建一个服务器端的控制器Category，添加必要的引用后，添加一个只读的私有变量dc，用来访问SimpleCMSEntities的实例，代码如下：

private readonly SimpleCMSEntities dc = newSimpleCMSEntities();

分类树的Store调用的是List方法，因而将Index方法修改为List方法，并加入相应的权限、返回对象和基本结构代码，代码如下：

[AjaxAuthorize(Roles= "普通用户,系统管理员")]

publicJObject List()

{

bool success = false;

string msg = "";

JArray ja = new JArray();

int total = 0;

try

{

success = true;

}

catch (Exception e)

{

msg = e.Message;

}

returnHelper.MyFunction.WriteJObjectResult(success, total, msg, ja);

}

树展开一个节点，都会以node作为参数将该节点的id提交，因而，在提取数据是，首先要做的是先从node提取id，代码如下：

intid=-1;

int.TryParse(Request["node"], out id);

因为在定义Store时，根节点的id为-1，因而这里要分两种情况处理搜索结果，代码如下：

IQueryable<T_Category>q = null;

if (id== -1)

{

q = dc.T_Category.Where(m =>m.Hierarchylevel == 0 & m.State == 0).OrderBy(m=>m.Title);

}

else

{

q = dc.T_Category.Where(m => m.ParentId== id & m.State == 0).OrderBy(m => m.Title);

}

代码中，当id为-1时，就搜索层数为0的记录，否则，则搜索ParentId的等于id的记录。

这里有个问题，因为记录根据标题进行了排序，因而未分类这个类别就不知道跑到那个位置去了，因而，为了保持为分类在顶部，在查询的时候最好把它排除出去，另外再添加到结果中，代码修改如下：

q =dc.T_Category.Where(m => m.Hierarchylevel == 0 & m.CategoryId!=10000& m.State == 0).OrderBy(m=>m.Title);

现在要写数据到ja里面了，因为要多次写相同格式的对象，因而，把写对象独立为一个方法比较好，代码如下：

privateJObject writeNode(int id, string text, int parentId, bool isLeaf)

{

JObject jo = new JObject

{

new JProperty("id",id),

new JProperty("text",text),

newJProperty("parentId",parentId),

new JProperty("leaf",newJValue(isLeaf))

};

if (!isLeaf)

{

jo.Add(new JProperty("children",new JArray()));

}

return jo;

}

从代码可以看到，方法带4个参数，前3个参数就是返回节点所需的id、text和parentId的字段。而isLeaf的作用就是判断节点是否有子节点，如果有，就添加一个children属性，这样在客户端就能看到一个加号，可以展开。

现在，先在id等于-1时的查询语句下添加以下两个节点：

ja.Add(writeNode(-99,"全部", -1,true));

ja.Add(writeNode(10000, "未分类", -1, true));

添加全部节点，目的是为了方便查看数据，如果不喜，可不要。未分类这个是必须的。注意两个节点的id。

接着就是在判断语句后用循环输出节点了，代码如下：

foreach(var c in q)

{

bool leaf = c.Childs.Count() > 0 ? false: true;

int pid = c.ParentId == null ? -1 :(int)c.ParentId;

ja.Add(writeNode(c.CategoryId, c.Title,pid, leaf));

}

在代码中，使用到了刚才设置的关联，通过统计子节点的个数来判断该节点是否有子节点。

生成一下解决方案，然后刷新一下页面。喔，根节点没自动打开，而且也没隐藏。先切换到树的Store定义，为根节点添加一个expanded配置项，值为true，让它自动展开。然后切换到视图定义，将rootVisible配置项设置为false。这些事情在复制粘贴过程中经常会发生。

好了，现在刷新一下页面，就会看到如图48的效果了。

图48 文章类别树的显示结果

这样，树的显示就完成了，下文继续。

源代码下载：http://vdisk.weibo.com/s/hL6up