FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 2293|回复: 2

FineUI 评分控件在Grid中

[复制链接]
发表于 2020-2-10 18:08:34 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 2020-2-10 18:07 编辑

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. @section body {
  8.     <h2>Grid中的评分控件</h2>
  9.     @(F.Grid().IsFluid(true).CssClass("blockpanel").Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name").AllowCellEditing(true)
  10.         .Columns(
  11.             F.RowNumberField(),
  12.             F.RenderField().HeaderText("姓名").DataField("Name").Width(100),
  13.             F.RenderField().HeaderText("性别").DataField("Gender").FieldType(FieldType.Int).RendererFunction("renderGender").Width(60),
  14.             F.RenderField().HeaderText("入学年份").DataField("EntranceYear").FieldType(FieldType.Int).Width(100),
  15.             F.RenderCheckField().HeaderText("是否在校").DataField("AtSchool").RenderAsStaticField(true).Width(80),
  16.             F.RenderField().HeaderText("只读评分").DataField("Rating").FieldType(FieldType.Float).RendererFunction("renderRating").Width(135),
  17.             F.RenderField().HeaderText("五星评分").DataField("Rating2").FieldType(FieldType.Float).RendererFunction("renderRating2").Width(135),
  18.             F.RenderField().HeaderText("奖杯评分").DataField("Rating3").FieldType(FieldType.Float).RendererFunction("renderRating3").Width(135),
  19.             F.RenderField().HeaderText("注册日期").DataField("EntranceDate").FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").ExpandUnusedSpace(true)
  20.         )
  21.         .DataSource(DataSourceUtil.GetSimpleDataTable())
  22.     )
  23.     <br>
  24.     <br>

  25. }

  26. @section script {
  27.     <script src="~/res/js/fineui-rating.js"></script>
  28.     <script>
  29.         function renderGender(value) {
  30.             return value == 1 ? '男' : '女';
  31.         }

  32.         function renderRating(value) {
  33.             return F.ext.renderRating({
  34.                 value: value,
  35.                 readonly: true
  36.             });
  37.         }

  38.         function renderRating2(value) {
  39.             return F.ext.renderRating({
  40.                 value: value
  41.             });
  42.         }

  43.         function renderRating3(value) {
  44.             return F.ext.renderRating({
  45.                 value: value,
  46.                 icon: 'trophy'
  47.             });
  48.         }
  49.     </script>
  50. }
复制代码


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




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2020-2-12 10:55:21 | 显示全部楼层
现在MVC 版中显示为方框.请问一下这里的五角星在哪里定义!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2020-2-13 12:41:50 | 显示全部楼层
这个很不错,赞一个! 可惜不懂MVC,用的是FineUIPro,请问WebForm里该怎么用?有没Demo可以下载一下?谢谢!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-29 20:27 , Processed in 0.047829 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表