FineUI使用记录

Posted jiangyunfeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FineUI使用记录相关的知识,希望对你有一定的参考价值。

@{
ViewBag.Title = "Grid/Grid";
var F = html.F();
}

@section body {

@(F.Grid().IsFluid(true).CssClass("blockpanel").Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("SaleAfterDTID").DataTextField("SaleAfterDTID")
.Columns(
F.RowNumberField(),
F.RenderField().HeaderText("处理类别").DataField("DealType").Width(120),

F.RenderField().HeaderText("原因分类").DataField("ReasonClass").Width(200),

F.RenderField().Width(80).EnableHeaderMenu(false).RendererFunction("renderActions")

)
.DataSource(ViewBag.DataSource)
)
<br>
<br>

@(F.Button().Text("选中了哪些行").ID("Button1").Listener("click", "notifySelectedRows(‘Grid1‘);"))


@(F.Button().Text("新增一行").ID("Button2").Listener("click", "addRow();"))

}

 

@section script {

<script src="~/res/js/grid.js"></script>
<script>
var jsonData;
jsonData=eval(@Html.Raw(ViewBag.jsonData));
function jiang() {
alert("jiangyunfeng");
}
function renderActions(value, params) {
var deleteImageUrl = ‘@Url.Content("~/res/icon/delete.png")‘;
return ‘<a class="action-btn delete" href="javascript:;"><img class="f-grid-cell-icon" src="‘ + deleteImageUrl + ‘"></a>‘;
}

function addRow() {
var grid1 = F.ui.Grid1;

// 新增一行(返回新增行的ID)
var addDa = {

‘DealType‘: ‘前台添加的1‘,
‘ReasonClass‘: ‘前台添加的2‘
};
var addedRowId = grid1.addNewRecord(addDa, true);
addDa.rowIndex = addedRowId;
jsonData.push(addDa);
// alert(addedRowId);
}

F.ready(function () {
if (jsonData) {
var grid1 = F.ui.Grid1;
var gridData = grid1.getMergedData();
$.each(gridData, function (index, itme) {
jsonData[index].rowIndex = itme.id;
});
}

//alert(jsonData[1].ReasonClass);

//F.ui.btnSelectItem6.on(‘click‘, function () {
// alert(‘按钮的单击‘);
//});

//F.ui.DropDownList1.el.on(‘select‘, function () {
// alert(‘下拉的单击2‘);
//});

function getRowData(rowdata) {
alert(rowdata.id);
}

var grid1 = F.ui.Grid1;
grid1.el.on(‘click‘, ‘a.action-btn.delete‘, function (event) {
var cnode = $(this);
var rowData = grid1.getRowData(cnode.closest(‘.f-grid-row‘));

getRowData(rowData);
});
});

</script>
}

以上是关于FineUI使用记录的主要内容,如果未能解决你的问题,请参考以下文章

FineUI经典项目展示 - 生产在线管理系统

FineUI配置文件

FineUI速成 标签

FineUI(开源版)v6.0中FState服务器端验证的实现原理

FineUI十周年纪念版即将发布(基于像素的响应式布局,独此一家)!

FineUI常见问题