knockoutjs + easyui.treegrid 可编辑的自定义绑定插件
目前仅支持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"));
- })();
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。