FineUI 评分控件在Grid中

棕榈

FineUI 评分控件在Grid中






之前的FineUI评分控件https://fineui.com/bbs/forum.php?mod=viewthread&tid=22354&fromuid=5871，是不可以直接显示在Grid中的，它是对NumberBox的包装，在常规Grid编辑模式下是不允许每一行都创建不同的NumberBox，所以我们需要单独创建了一个Grid包装方法。


使用方法与创建渲染列是一样的，代码：

1. function renderRating(value) {
   
2.         return F.ext.renderRating({
   
3.                 value: value
   
4.         });
   
5. }

复制代码

将 renderRating 放入渲染函数，代码：

1. F.RenderField().HeaderText("评分").DataField("Rating").FieldType(FieldType.Float).RendererFunction("renderRating")

复制代码

这样就可以完成所有的操作了，与普通渲染列没有区别。

如果想加入更多参数，代码：

1. function renderRating(value) {
   
2.         return F.ext.renderRating({
   
3.                 value: value,
   
4.                 icon: 'trophy',
   
5.                 count: 11,
   
6.                 size: 20,
   
7.                 color: '#16a085',
   
8.                 allowHalf: true,
   
9.                 readonly: false
   
10.         });
    
11. }

复制代码

下面是示例的代码：

1. @page
   
2. @model FineUICore.EmptyProject.RazorPages.Pages.GridModel
   
3. @{
   
4.     ViewBag.Title = "Grid";
   
5.     var F = @Html.F();
   
6. }
   
7. 
   
8. @section body {
   
9.     <h2>Grid中的评分控件</h2>
   
10.     @(F.Grid().IsFluid(true).CssClass("blockpanel").Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name").AllowCellEditing(true)
    
11.         .Columns(
    
12.             F.RowNumberField(),
    
13.             F.RenderField().HeaderText("姓名").DataField("Name").Width(100),
    
14.             F.RenderField().HeaderText("性别").DataField("Gender").FieldType(FieldType.Int).RendererFunction("renderGender").Width(60),
    
15.             F.RenderField().HeaderText("入学年份").DataField("EntranceYear").FieldType(FieldType.Int).Width(100),
    
16.             F.RenderCheckField().HeaderText("是否在校").DataField("AtSchool").RenderAsStaticField(true).Width(80),
    
17.             F.RenderField().HeaderText("只读评分").DataField("Rating").FieldType(FieldType.Float).RendererFunction("renderRating").Width(135),
    
18.             F.RenderField().HeaderText("五星评分").DataField("Rating2").FieldType(FieldType.Float).RendererFunction("renderRating2").Width(135),
    
19.             F.RenderField().HeaderText("奖杯评分").DataField("Rating3").FieldType(FieldType.Float).RendererFunction("renderRating3").Width(135),
    
20.             F.RenderField().HeaderText("注册日期").DataField("EntranceDate").FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").ExpandUnusedSpace(true)
    
21.         )
    
22.         .DataSource(DataSourceUtil.GetSimpleDataTable())
    
23.     )
    
24.     <br>
    
25.     <br>
    
26. 
    
27. }
    
28. 
    
29. @section script {
    
30.     <script src="~/res/js/fineui-rating.js"></script>
    
31.     <script>
    
32.         function renderGender(value) {
    
33.             return value == 1 ? '男' : '女';
    
34.         }
    
35. 
    
36.         function renderRating(value) {
    
37.             return F.ext.renderRating({
    
38.                 value: value,
    
39.                 readonly: true
    
40.             });
    
41.         }
    
42. 
    
43.         function renderRating2(value) {
    
44.             return F.ext.renderRating({
    
45.                 value: value
    
46.             });
    
47.         }
    
48. 
    
49.         function renderRating3(value) {
    
50.             return F.ext.renderRating({
    
51.                 value: value,
    
52.                 icon: 'trophy'
    
53.             });
    
54.         }
    
55.     </script>
    
56. }
    

复制代码

fineui-rating.js 文件请到知识星球下载。

erp8@live.cn

现在MVC 版中显示为方框.请问一下这里的五角星在哪里定义!

ramble5956

这个很不错，赞一个！ 可惜不懂MVC，用的是FineUIPro，请问WebForm里该怎么用？有没Demo可以下载一下？谢谢！