knockoutjs + easyui.treegrid 可编辑的自定义绑定插件
http://blog.csdn.net/maddemon/article/details/16846183
目前仅支持URL的CRUD。不需要的话可以却掉相关代码,把treegrid的data直接赋值给viewModel,然后用ko提交整个data
1、支持双击编辑
2、单击Cell,自动保存编辑。
3、4个功能按钮。
插件源码:
- ko.bindingHandlers.etreegrid = {
- editing: false,
- editIndex: 0,
- init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
- var self = ko.bindingHandlers.etreegrid;
- var opts = valueAccessor();
- $(element).treegrid({
- url: opts.url,
- treeField: opts.treeField,
- idField: opts.idField,
- onDblClickRow: function (node) {
- if (viewModel.add)
- editRow(node);
- },
- onClickCell: function () {
- if (viewModel.add) {
- saveRow();
- }
- }
- });
- viewModel.add = function () {
- addRow(getSelectedRow());
- };
- viewModel.edit = function () {
- editRow(getSelectedRow());
- };
- viewModel.remove = function () {
- removeRow(getSelectedRow());
- };
- viewModel.cancel = function () {
- var node = getSelectedRow();
- if (viewModel.onCancel) {
- viewModel.onCancel(node);
- }
- $(element).treegrid("unselectAll");
- try {
- if (self.editing) {
- $(element).treegrid("cancelEdit", self.editIndex);
- $(element).treegrid("refresh", self.editIndex);
- self.editing = false;
- }
- } catch (ex) {
- self.editing = false;
- self.editIndex = 0;
- }
- };
- function getSelectedRow() {
- return $(element).treegrid("getSelected");
- }
- function saveRow() {
- var rowIndex = self.editIndex;
- if (rowIndex == 0) {
- return;
- }
- self.editIndex = 0;
- self.editing = false;
- $(element).treegrid("endEdit", rowIndex);
- $.ajax({
- async: false,
- url: opts.saveUrl,
- method: "POST",
- data: $(element).treegrid("find", rowIndex),
- success: function (data) {
- $(element).treegrid("refresh", rowIndex);
- if (viewModel.onSaved) {
- viewModel.onSaved(data, rowIndex);
- }
- },
- error: function () {
- }
- });
- }
- function editRow(node) {
- if (!node || node[opts.idField] == self.editIndex) return;
- saveRow();
- self.editing = true;
- self.editIndex = node[opts.idField];
- $(element).treegrid('select', self.editIndex);
- $(element).treegrid("beginEdit", self.editIndex);
- if (viewModel.onEditing) {
- viewModel.onEditing(node);
- }
- }
- function addRow(parentNode) {
- if (self.editing) return;
- var parentId = parentNode ? parentNode[opts.idField] : 0;
- var newNode = viewModel.newNode(parentId);
- $(element).treegrid("append", { parent: parentId, data: [newNode] });
- editRow(newNode);
- }
- function removeRow(node) {
- if (!node) return;
- if (viewModel.onRemoving && !viewModel.onRemoving(node)) {
- return;
- }
- $.messager.confirm('确认', '你确定要删除吗?', function (r) {
- if (!r) return;
- $.post(opts.deleteUrl + "?id=" + node[opts.idField], function (data, statusText) {
- if (viewModel.onRemoved) {
- viewModel.onRemoved(data);
- }
- else {
- if (statusText == "success") {
- $(element).treegrid("remove", node[opts.idField]);
- }
- else {
- $.messager.alert('警告', "删除失败", 'warning');
- }
- }
- });
- });
- }
- }
- };
使用示例:
HTML:
- <div id="area-form">
- <div id="area-tool-bar">
- <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" data-bind="click: add">新增</a>
- <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" data-bind="click: edit">编辑</a>
- <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" data-bind="click: remove">删除</a>
- <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" plain="true" data-bind="click: cancel">取消</a>
- </div>
- <table id="area-list" rownumbers="true" title="区域列表" border="0" toolbar="#area-tool-bar" data-bind="etreegrid: tree">
- <thead>
- <tr>
- <th field="Name" width="500" data-options="editor:{type:'validatebox'}">地区名称</th>
- <th field="Code" width="120" data-options="editor:{type:'validatebox'}">地区编码</th>
- </tr>
- </thead>
- </table>
- </div>
Javascript:
- (function () {
- var newId = 9999999;
- var listId = "#area-list";
- function AreaModel() {
- this.tree = {
- url: "/area/gettree",
- treeField: "Name",
- idField: "ID",
- saveUrl: "/area/save",
- deleteUrl: "/area/delete",
- };
- this.newNode = function (parentId) {
- return { ID: newId, Name: '', Code: '', ParentID: parentId };
- };
- this.add = ko.observable();
- this.edit = ko.observable();
- this.remove = ko.observable();
- this.cancel = ko.observable();
- this.validate = function (node) {
- return !!node.Name;
- };
- this.onCancel = function (node) {
- if (node && node.ID == newId) {
- $(listId).treegrid("remove", node.ID);
- }
- };
- this.onSaved = function (data, editIndex) {
- if (data.result) {
- var row = data.data;
- if (editIndex == newId) {
- $(listId).treegrid("remove", editIndex);
- $(listId).treegrid("append", { parent: row.ParentID, data: [data.data] });
- }
- }
- };
- this.onRemoving = function (node) {
- if (node.ID == newId) {
- $(listId).treegrid("remove", node.ID);
- return false;
- }
- else {
- if (!node.children || node.children.length > 0) {
- $.messager.alert('删除失败', "该地区有下属分类,不可直接删除!", 'warning');
- return false;
- }
- }
- return true;
- };
- };
- ko.applyBindings(new AreaModel(), document.getElementById("area-form"));
- })();
knockoutjs + easyui.treegrid 可编辑的自定义绑定插件的更多相关文章
- Maven自定义绑定插件目标:创建项目的源码jar
<build> <plugins> <!-- 自定义绑定,创建项目的源码jar --> <plugin> <groupId>org.apac ...
- .net mvc mssql easyui treegrid 及时 编辑 ,支持拖拽
这里提到了,1个问题,怎么扩展 Easyui 参见: http://blog.csdn.net/chenkai6529/article/details/17528833 @{ ViewBag.Titl ...
- EasyUI treegrid 获取编辑状态中某字段的值 [getEditor方法获取不到editor]
如题,在treegrid里,按照api里getEditor方法的说明, getEditoroptionsGet the specified editor, the options contains t ...
- KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定
除了ko内建的绑定,还可以自定义绑定,灵活地封装复杂的行为使之可重用. 自定义绑定 注册自定义绑定 向 ko.bindingHandles添加一个子属性来注册一个绑定. ko.bindingHandl ...
- EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他
原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...
- KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定
您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- 基于EasyUI Treegrid的权限管理资源列表
1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...
- 5.Knockout.Js(自定义绑定)
前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...
随机推荐
- Java中是否可以继承String类,为什么
Java中,是否可以继承String类?为什么? 答案: 不可以,因为String类有final修饰符,而final修饰的类是不能被继承的,实现细节不允许改变. public final class ...
- 【转】【C++】ShellExecute, WinExec, CreateProcess 三者的区别
ShellExecute ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件.打开一个目录.打印一个文件等等),并对外部程序有一定的控制. 有几个API函数都可以实现这些功能 ...
- 携手K2 BPM,华住酒店完美实现“互联网+”转型
华住酒店集团,旗下6大品牌酒店,包括商旅品牌—禧玥酒店.全季酒店.星程酒店.汉庭酒店.海友酒店,以及度假品牌—漫心度假酒店.高端大气上档次一气呵成,2013年签约K2,携手成就美好生活. 演讲人:宋洪 ...
- struts2中简单的文件上传
2016-08-31 一. 文件上传 利用commons-fileupload-1.2.1.jar实现简单的上传文件,首先在页面上填写表单,记得加上enctype="multip ...
- WorldWind源码剖析系列:BMNG类构造函数深入分析
BMNG构造函数深入分析 一.主要类图 二.主要功能: 1) BMNG类 BMNG类将包含以“Blue Marble”为主题的所有可渲染影像的根节点添加到当前星球的可渲染对象列表中,包括 ...
- 在Linux用libcurl.a在链接的时候出错
其实出错是因为curl链接的时候需要别的库.我用如下方法解决 1.http://curl.haxx.se/download/curl-7.45.0.tar.gz官网下载源码 2../configure ...
- Asp.net设计模式笔记之三:业务逻辑层的组织
本章内容要点: 1.Transaction Script模式组织业务逻辑 2.Active Record模式和Castle Windsor来组织业务逻辑 3.Domain Model模式来组织业务逻辑 ...
- [CareerCup] 14.1 Private Constructor 私有构建函数
14.1 In terms of inheritance, what is the effect of keeping a constructor private? 这道题问我们用继承特性时,如果建立 ...
- 最长回文子串(Manacher算法)
回文字符串,想必大家不会不熟悉吧? 回文串会求的吧?暴力一遍O(n^2)很简单,但当字符长度很长时便会TLE,简单,hash+二分搞定,其复杂度约为O(nlogn), 而Manacher算法能够在线性 ...
- [原创]Net实现Excel导入导出到数据库(附源码)
关于数据库导出到Excel和SQLServer数据导出到Excel的例子,在博客园有很多的例子,自己根据网上搜集资料,自己做了亦歌简单的demo,现在分享出来供初学者学习交流使用. 一.数据库导入导出 ...